Что происходит за кулисами при привязке к функции в AngularJS

Может кто-нибудь объяснить, что происходит за кулисами, когда вы привязываетесь к функции в AngularJS? Какие часы они создают? У меня есть ощущение, что это создаст два наблюдения (в моем примере ниже) по одному для каждого свойства, которое составляет возвращаемое значение. Однако я, конечно, не уверен в этом, но такое чувство, что мы не должны этого делать.

например

<div ng-show="vm.someFunc()">

JS

vm.someFunc = function() {  
    return vm.property1 || vm.property2;
}
Источник

2 ответа

Решение

Если вы создали метод угловой области видимости "vm.someFunc()", он будет постоянно опрашиваться. Вы можете проверить это, установив точку останова в этом методе, он будет постоянно получать удар. Если вы проверите диспетчер задач и покажете браузер, на котором работает ваш сайт, память продолжает расти и не останавливается.

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

Отображение или скрытие не являются событиями, поэтому он и так опрашивается. Чтобы исправить и предоставить те же функции, превратите это в переменную области видимости.
изменить тег HTML с:

<div ng-show="vm.someFunc()">

в

<div ng-show="vm.someFunc">

И в вашем контроллере:

$scope.KeyPressed = false;
$scope.Tags = '';

затем создайте событие наблюдения за тем, что вы хотите наблюдать:

//initialize showtag when page loads
$scope.vm.someFunc = $scope.KeyPressed && $scope.Tags !== '';

//watch for any new changes on keypressed
$scope.$watch('KeyPressed', function (newValue, oldValue) {
     if (newValue && $scope.Tags !== '') {
         $scope.vm.someFunc= true;
     } else {
         $scope.vm.someFunc= false;
     }
}

//watch for any new changes on keypressed
$scope.$watch('Tags', function (newValue, oldValue) {
     if (newValue !== "" && $scope.KeyPressed) {
         $scope.vm.someFunc= true;
     } else {
         $scope.vm.someFunc= false;
     }
}

Или вы можете перейти на "watchCollection" вместо нескольких часов, например:

$watchCollection('[KeyPressed, Tags]', function (newValue) { }

newValue [0] является значением KeyPressed, а newValue[1] является значением тегов

Или согласиться с принятым ответом и минимизировать количество часов:

$scope.TruthyVal= function () {
    return $scope.KeyPressed && $scope.Tags !== '';
};

$scope.$watch('TruthyVal', function (newValue, oldValue) {
     if (newValue) {
         $scope.vm.someFunc= true;
     } else {
         $scope.vm.someFunc= false;
     }
}
Источник

На самом деле angular не волнует, что вы пишете в html - функция, переменная или что-то еще. Он принимает выражение в виде строки, анализирует его и вычисляет его значение в каждом цикле дайджеста. Так, {{1 + 2}} а также {{sum(1, 2)}} а также {{1 | sum:2}} на самом деле делают ту же работу с более или менее одинаковой скоростью.

Все три способа являются законными и не создают утечек памяти.

Причина, по которой всегда не рекомендуется использовать функции в ng-show, заключается в том, что многие функции отнимают много времени, поэтому ваш дайджест становится очень медленным. И даже если ваши функции работают быстро, вам не гарантируется, что они не будут расти в будущем.

Источник
Другие вопросы по тегам