javascript - 消除 $watch 的替代方法

Question

正如我的 Angular 应用程序的标题中提到的，由于以下方法，它导致了许多 watch 的创建，我想为此找到一些替代方法。

<div ng-app="myapp">
    <first></first>
</div>
   var myApp = angular.module('myapp', []);

    myApp.directive('first', [
        function() {
            return {
                restrict: 'AE',
                replace: true,
                transclude: true,
                template: '<div id="first"><second id="second" param="paramData"></second></div>',
                scope: {
                },
                controller: [
                    '$scope',
                    '$element',
                    '$attrs',
                    function($scope, $element, $attrs) {

                    }
                ],
                link: function(scope, element, attrs, ctrl,$timeout) {
                    scope.paramData = "Test";
                    scope.updateParamData = function(){
                        scope.paramData = "TimeOut";
                    };
                    //$timeout(scope.updateParamData,5000);
                }
            };
        }
    ]);

    myApp.directive('second', [
        function() {
            return {
                restrict: 'AE',
                replace: true,
                template: '<div></div>',
                scope: {
                    param: '=param'
                },
                controller: [
                    '$scope',
                    '$element',
                    '$attrs',
                    function($scope, $element, $attrs) {
                            console.log("inside controller",$scope.param);
                    }
                ],
                link: function(scope, element, attrs) {
                    console.log("inside link",scope.param);
                    scope.$watch(scope.param,function(){
                        console.log("inside watch",scope.param);
                        element.innerHTML = scope.param;
                    });
                }
            };
        }
    ]);

在上面的示例中，从第一个指令传递到第二个指令的参数由第一个指令控制，因此参数可以随时更改，因此在第二个指令中，我使用 watch 根据以下内容更新第二个指令 HTML参数更新。

所以现在的问题是，如果我在应用程序的许多地方使用相同的方法，它会导致多次监视，所以我想检查这种方法是否正确，或者是否有其他替代方法。？

Answer 1

某处必须有一个$watch来检测值的变化。

减少监视数量的一种方法是不在 second 指令中使用双向绑定(bind) scope: {param: "="}，而是使用"&" 的单向绑定(bind)。

.directive("second", function(){
  return {
    scope: { param: "&" }, // this does not create a watch on the parent
    template: "<div>{{param()}}</div>" // {{ }} creates a watch
  }
})

当然，您也可以在 link/controller 中显式添加 $watch (尽管在您使用 element.innerHTML)使用上面的模板方法可以更轻松地完成):

link: function(scope, element){
   scope.$watch(function(){ return scope.param(); },
     function(newValue, oldValue){
       console.log(newValue, oldValue);
     });
}

因此，每种情况下 watch 的数量都是 1。