AngularJS - 在指令中多次评估链接 Fn答案

【问题标题】：AngularJS - linking Fn is evaluated many times in directiveAngularJS - 在指令中多次评估链接 Fn
【发布时间】：2014-10-08 08:53:11
【问题描述】：

'use strict';

angular.module('app', [])

.controller('MainCtrl', function($scope) {
  console.log('heyo')
})

.directive('panel', function() {
  return {
    template: '<div ng-if="isAuthenticated()">Im In!</div>',
    restrict: 'E',
    scope: {},
    replace: true,
    link: function(scope, element, attrs) {

      var uid = 3

      scope.isAuthenticated = function() {
        console.log(uid)
        return uid !== null
      }

    }
  }
})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.4/angular.min.js"></script>

<div ng-app="app">
  <panel></panel>
</div>

我的问题非常简单明了。 console.log 在我的应用程序上被评估了 50 次，而这里只有 2 次。

发生了什么事？

我认为它与$digest() 循环有关（如果不相关的话），但更明确的答案会很好。

【问题讨论】：

标签： javascript angularjs angular-directive

【解决方案1】：

ngIf 在提供的表达式上调用 $watch 函数，在您的情况下是“isAuthenticated()”。

每个 $digest 调用都会调用这个表达式。看： https://docs.angularjs.org/api/ng/type/$rootScope.Scope#$watch

在以上链接中，请注意：

watchExpression 在每次调用 $digest() 时都会被调用，并且应该返回将被观看的值。

还有：

由于 $digest() 在检测到更改时会重新运行，因此 watchExpression 可以每个 $digest() 执行多次，并且应该是幂等的

在这里你可以看到 ngClick 如何调用摘要导致 ngIf 评估它的表达式 http://jsfiddle.net/kihu/bbs8ajnk/2/

这一行记录了摘要循环：

$rootScope.$watch(function(){console.log("digest")}, function(){console.log('looped')});

【讨论】：

确实，它会为每个使用$scope“链接”到视图的项目触发。明白了，谢谢

【解决方案2】：

不是link 函数被多次评估，而是isAuthenticated 方法在每次$digest 进程运行时检查（基本上是模型更改时）。

您可以在这里看到http://plnkr.co/edit/3mHI2wxELwdF5Th2Pjhk?p=preview，每次$scope.y 更改它都会评估isAuthenticated

【讨论】：