AngularJS не обновляется, когда флажок обновляется с помощью jQuery

Question

У меня есть HTML-страница, использующая AngularJS.

Это в основном список, который можно отфильтровать, установив флажки.

Я хочу использовать плагин jQuery 'garlic' для запоминания состояний флажков.

Плагин работает хорошо, за исключением того, что AngularJS «не видит» состояния флажков: листинг не фильтруется в соответствии с состояниями флажков. Даже без использования «чеснока» у меня та же проблема, если я делаю что-то вроде этого:

$(document).ready(function() {
    $('#my-checkbox-tracked-by-angular).attr('checked',true_or_false).change();
});

Сам флажок визуально обновляется, но AngularJS не запускается.

Единственное, что сработало для запуска AngularJS, - это использование события click:

$(document).ready(function() {
    $('#my-checkbox-tracked-by-angular).trigger("click");
});

AngularJS обновляет список, но событие click также переключает флажок в противоположное состояние, и я не хочу этого.

Есть ли способ сообщить Angular обновить при обновлении флажка с отслеживанием углов за пределами angular?

Примечание: я тоже пробовал:

$scope.$apply();

Но $ scope не определен, несмотря на то, что мой код находится после угловой загрузки. У меня есть AngularJS V1.2.1. Как я могу получить доступ к $ scope?

Answer 1

Есть ли способ сказать Angular обновить, когда отслеживается angular флажок обновлен вне угла?

Да, есть нечто, называемое «грязной проверкой», которое может помочь вам добиться этого (см. scope docs ).

Чтобы указать AngularJS на грязную проверку, вы можете сделать $scope.$apply();. Что-то вроде:

$(document).ready(function() {
    $('#my-checkbox-tracked-by-angular').attr('checked',true_or_false).change();

    // do dirty checking!
    // wrap it inside $timeout in order to avoid Action Already In Progress
    // you can laverage this in your app. Maybe it's not necessary,
    // but that depends on your entire app architecture and interaction
    // between all angularjs elements (controllers, directives, etc)
    $timeout(function() {
        $scope.$apply();
    });
});

Если по какой-либо причине вы не можете сделать это, возможно, вы можете использовать в качестве обходного пути, чтобы дважды вызвать событие click. Это не лучшее решение и, конечно, не самое чистое, но оно сделает свою работу. Что-то вроде:

$(document).ready(function() {
    $('#my-checkbox-tracked-by-angular).trigger("click").trigger("click");
});

Внимание

Если вы смешиваете AngularJS и jQuery для DOM-манипуляции напрямую, делайте это осторожно, это может привести к путанице. Чтобы получить дополнительную информацию о причинах, прочитайте «Мышление в AngularJS», если у меня есть фон jQuery? .

Дополнительные показания :

• $ rootScope.Scope # $ применять
• Действие уже выполняется
• $timeout