Question

在下面的代码中，我有一个指令，每次更改输入字段y时都会计算变量x。变量y已公开，因此它可用于声明控制器/指令。这很好但是它是一个简单的抽象，在我的实际场景中y的计算非常昂贵，因此我无法在每次y更改时计算x。理想情况下，只有在声明控制器/指令需要它时才会计算y。有没有办法实现这个目标？

var app = angular.module('app', []);
app.controller('ctl', function () {

});

app.directive("theDirective", function() {
      return {
        restrict: "AE", 
        scope: {
           y: '='
        },
        template: '<input ng-model="x" ng-change="xChanged()" />',
        link: function (scope, element, attrs) {

            scope.xChanged = function() { 
                 scope.y = scope.x * 2;
            };

        }
    }
});

Answer 1

如果您需要来自此指令的子级的数据，您可以通过在指令控制器中公开一个方法然后公开子指令可能需要的方法来实现此目的。

app.directive("theDirective", function() {
  return {
    restrict: "AE", 
    scope: {
       y: '='
    },
    template: '<input ng-model="x" ng-change="xChanged()" />',
    controller: function (scope) {

        scope.getY = function() { 
             return scope.x * 2;
        };

    }
}
});

然后你的chid可以要求父母可以调用那个方法。

app.directive("theDirectiveChild", function() {
  return {
    restrict: "A", 
    require: ["^theDirective"],
    link: function(scope, element, attrs, ctrls){

      var theDirective = ctrls[0];

      var y = theDirective.getY();

    }
}
});

编辑：要做相反的事情，你希望父母告诉孩子更新，你可以利用$ scope.broadcast（）这可以在范围链中触发一条消息，它看起来像这样。

app.directive("theDirective", function() {
  return {
    restrict: "AE", 
    scope: {
       y: '='
    },
    template: '<input ng-model="x" ng-change="xChanged()" />',
    link: function (scope) {

        scope.on('update-the-directive' , function() {
           scope.y = scope.x * 2;
        });

    }
}
});

然后你的chid可以要求父母可以调用那个方法。

app.directive("theDirectiveParent", function() {
  return {
    restrict: "A", 
    link: function(scope, element){

      scope.click = function() {
        scope.$broadcast('update-the-directive');
      }

    }
}
});

从指令返回变量而不是暴露范围

1 个答案: