Как функция angularjs устанавливает наблюдатель для функций?

Я понимаю, что когда у меня есть <p>{{abc}}<p> или {{ng-repeat="item in list"}} angularjs установит Бодрствующего для $scope.abc и $scope.list, таким образом, их стоимость будет проверяться во время каждого цикла переваривать.Как функция angularjs устанавливает наблюдатель для функций?

Однако, когда я использую директиву нг-класса с функции, я не мог понять, что выражение угловой смотреть

angular.module("app",[]).controller("control",function($scope){ 
 
    var clicked = false; 
 
    // this is the variable I would watch for and returnString is the call back... 
 
    // but how could angular possibly know?? 
 
    $scope.toggle = function(){ 
 
    clicked = !clicked; 
 
    } 
 
    $scope.returnString = function(){ 
 
    if(clicked){ 
 
     return 'text-success'; 
 
    } 
 
    return 'text-danger'; 
 
    } 
 
});

<!DOCTYPE html> 
 
<html ng-app="app"> 
 

 
    <head> 
 
    <link data-require="[email protected]" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" /> 
 
    <script data-require="[email protected]" data-semver="1.5.0" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script> 
 
    </head> 
 

 
    <body ng-controller="control"> 
 
    <button ng-click="toggle()">click</button> 
 
    <h1 ng-class="returnString()">hello world</h1> 
 
    <!--ng-class="clicked?'text-success':'text-danger'" this way angular knows what to watch...but what if I give it a function???--> 
 
    </body> 
 

 
</html>

в HTML ... Угловая делает не знаю, какое значение «returnString()» полагается, как может инфраструктура установить наблюдателя? или делает угловое просто . Выражение ng-класса после каждого цикла дайджеста?

источник

2016-03-22 watashiSHUN

AngularJs может использовать функцию $watch над функцией.

Например, вместо $watch('abc', function() { /* code */});

вы могли бы сделать это

$watch(function() { return $scope.$abc; }, function() { /* code */ });

так ng-class работает по тому же пути: если поместить функцию, она будет применять $ часы функции в контекст контекста (это означает, что функция должна быть определена в текущей области)

См. $watch документация в AngularDocs о том, как она использует функцию для просмотра:

scope.$watch(
    // This function returns the value being watched. It is called for each turn of the $digest loop 
    function() { return food; }, 
    // This is the change listener, called when the value returned from the above function changes 
    function(newValue, oldValue) { 
    if (newValue !== oldValue) { 
     // Only increment the counter if the value changed 
     scope.foodCounter = scope.foodCounter + 1; 
    } 
    } 
);

вещь наблюдают, таким образом, является результатом функции, которая выполняется в каждом цикле переваривать (вы можете установить точку останова отладки, чтобы проверить его)

источник

2016-03-22 20:15:13

+1 за идею отладки , после вставки 'console.log' в указанный выше код ... каждый цикл дайджеста запускает функцию для запуска дважды (** минимальное количество для углового наблюдателя **) – watashiSHUN

На самом деле я испытываю очень странное поведение после добавления' $ scope.count ++; 'в мой код ... цикл digest всегда идет в 11 раз (бесконечный цикл?), и мой ng-класс больше не работает [plunker] (https://plnkr.co/edit/aOzYLtpywuWs94mJzOO7?p= предварительный просмотр) – watashiSHUN

, так как вы добавляете {{ t}} вы добавляете часы над $ scope.count .., и это значение меняется в каждом дайджесте - вы обновляете его, заставляя запускать еще один цикл дайджеста. Попробуйте использовать count в локальной переменной в контроллере и вместо этого используйте console.log. См. Https://plnkr.co/edit/c7dFDyXGJsQBoHstgTBs?p=preview –

Как функция angularjs устанавливает наблюдатель для функций?

ответ

Смежные вопросы