Як я можу сказати AngularJS "оновити"


168

У мене є подія клацання, яка трапляється за межами моєї спеціальної директиви, тому замість атрибута "ng-click" я використовую слухач jQuery.click () і викликаю функцію в межах моєї сфери, наприклад:

$('html').click(function(e) {
  scope.close();
);

close () - це проста функція, яка виглядає приблизно так:

scope.close = function() {
  scope.isOpen = false;
}

На мій погляд, у мене є елемент із "ng-show", пов'язаний з isOpen так:

<div ng-show="isOpen">My Div</div>

Під час налагодження я виявляю, що виклик close (), isOpen оновлюється до помилкового, але подання AngularJS не оновлюється. Чи є спосіб я вручну підказати Angular оновити подання? Або є більш «кутовий» підхід до вирішення цієї проблеми, якого я не бачу?

Відповіді:


315

Рішенням було викликати ...

$scope.$apply();

... у моєму зворотному дзвінку jQuery подій.


9
Я думаю, що це посилання буде корисним. jimhoskins.com/2012/12/17/angularjs-and-apply.html
Роман Скляров

6
чи не так $scope.$apply();?
ErichBSchulz

Ви можете використовувати як $ range, так і область застосування, це лише різниця в позначеннях, але це призводить до того ж.
користувач1226868

4
@ErichBSchulz -Often в директивах, я бачу сферу, яка використовується без $, який, на мою думку, може розмежовувати її та "$ область", яка вводиться в контролери. У контролерах важливо посилатись на $ range, тому Angular знає, яку залежність вводити, тоді як у функції посилання директиви вона завжди передає ті самі 4 елементи порядковими і не потребує конкретного імені (область, елемент, attrs, контролер ).
cchamberlain

30

Чому? $apply слід дзвонити?

TL; DR : $applyслід викликати, коли потрібно застосувати зміни, внесені за межами кутового світу.


Просто для оновлення відповіді @ Дастіна , ось пояснення того, що саме застосовується $ і чому це працює.

$apply()використовується для виконання виразу в AngularJS поза рамкою AngularJS. (Наприклад, з подій DOM браузера, бібліотеки setTimeout, XHR або сторонніх бібліотек). Оскільки ми закликаємося до рамки AngularJS, нам потрібно виконати належний життєвий цикл обробки виключень , виконуючи годинник .

Кутовий дозволяє використовувати будь-яке значення як ціль зв’язування. Потім в кінці будь-якого повороту коду JavaScript він перевіряє, чи змінилося значення. Цей крок, який перевіряє, чи змінилися будь-які значення прив'язки, має метод, $scope.$digest()1 . Ми майже ніколи не називаємо це безпосередньо, як ми використовуємо $scope.$apply()натомість (який буде дзвонити $scope.$digest).

Угловий моніторить лише змінні, що використовуються в виразах і всьому, що $watchживе всередині області. Отже, якщо ви змінюєте модель за межами кутового контексту, вам потрібно буде закликати $scope.$apply()поширювати ці зміни, інакше Angular не дізнається, що вони були змінені, таким чином прив'язка не буде оновлена 2 .


14

Використовуйте

$route.reload();

не забудьте ввести $routeв свій контролер.


5
Також, використовуючи ui-роутер, обов'язково використовуйте$state.reload()
Jeffrey Roosendaal

Це було дуже корисно для наших тестів на скріншот! Ми знущаємося над станом, але іноді не обов'язково спостерігачі, які слідкують за змінами, що може призвести до заплутування збоїв або переривчасті збої. Але можливість перезавантажити область, як це, допомагає боротися з цим.
theblang
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.