从指令返回变量而不是暴露示波器

Question

在下面的代码中，我有一个指令，每次输入字段x被更改时计算变量y。变量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; 
     }; 

    } 
} 
}); 

然后你的孩子可以要求父母可以调用该方法。

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

    } 
} 
}); 

然后你的孩子可以要求父母可以调用该方法。

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

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

    } 
} 
});