Question

正如我在角度应用程序中的标题所提到的，由于以下方法导致创建了许多手表，我想找到一些替代方法。

<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;
                    });
                }
            };
        }
    ]);

在上面的例子中，从第一个指令传递到第二个指令的param由第一个指令控制，所以para可以随时改变，所以在第二个指令中我使用watch来更新第二个指令HTML基于param更新。

所以现在的问题是，如果我在我的应用程序中使用相同类型的方法在许多地方导致多个监视，所以我想检查这种方法是否正确或是否有任何其他替代方法。

Answer 1

必须才能在某处检查值，以检测值的变化。

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

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

当然，您还可以在$watch / link中明确添加controller（尽管在您使用element.innerHTML的特定示例中），可以更轻松地完成使用上面的模板方法）：

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

因此，每种情况下手表的数量为1个。

Answer 2

我认为无法改善这一点。由于您需要实际监听param的更改，因此在这种情况下我看不出与观察者不同的方式。

消除$ watch的替代方法

2 个答案: