angularjs 指令：链接和控制器之间如何通信？

Question

我有一个指令，我需要在指令控制器中访问其“config”属性值。 由于首先执行控制器构造函数，因此可以从控制器到链接进行通信，但反之则不行。 实现这一目标的最佳方法应该是什么？ 我考虑了以下方法

1) 将变量添加到作用域- 在我看来，这会污染范围，使变量在共享范围的任何其他地方都可以访问。

2)使用$broadcast 又是和上面一样的问题

3) 在控制器的this 上传递一个回调函数，并以config 作为参数从链接函数调用它

4）通过服务传递值-在我的情况下，我有多个此类指令需要通过该服务传递日期

或者有没有更好的方法让我错过了这样做？

module.directive('myDirective',function(){

return{
 restrict:'E',
 templateUrl:'path/to/html',
 link:function(scope,iElement,iAttrs,controller){

  var config=iAttrs.config;
//How to access this value inside the directive controller?

},
controller:function($scope){
//the directive attribute 'config' is required here for some larger computations which are not
//manipulating the DOM and hence should be seperated from the link function
})

Answer 1

在那里，您可以使用隔离范围概念，您可以在控制器内部创建隔离范围，并且在原型上不会从其父范围继承。为此，您需要在指令选项中使用scope: { ... }。有三个选项可以通过属性在指令内传递范围值

1. @ : 一种方式绑定
2. = : 双向绑定
3. &：表达式

在您的情况下，前两种情况会很好，这取决于您需要使用哪一种。如果您只想在这种情况下将范围变量的值传递给指令，您可以使用第一种方法，即@ 单向绑定。

如果你想更新指令和控制器中的变量，即只有双向绑定，那么你需要使用=

我认为= 适合你，所以你应该选择=

标记

<my-directive config="config"></my-directive>

指令

app.directive('myDirective', function() {
  return {
    restrict: 'E',
    scope: {
      config: '='
    },
    templateUrl: 'path/to/abc.html',
    link: function(scope, iElement, iAttrs, controller) {
      //here it will be access as scope.config
      console.log(scope.config);
    },
    controller: function($scope) {
      console.log($scope.config); //here also it would be available inisde scope
      //you could put a watch to detect a changes on config
    }
  }
});

Demo Plunkr

更新

由于config 的值是从属性中提供的，带有{{}} 之类的表达式，因此我们可以通过将[**$observe**][2] 放在$attrs 上来获得控制器内部的这些更改。为此，您需要在控制器上注入 $attrs 依赖项，这将为您提供指令元素上可用的所有属性集合。在同一个$attrs 对象上，我们将放置$observe，它的工作方式与$watch 的工作方式相同，后者进行脏检查& 如果值发生变化，它会触发手表。

指令

app.directive('myDirective', function() {
  return {
    restrict: 'E',
    templateUrl: 'path/to/abc.html',
    link: function(scope, iElement, iAttrs, controller) {
      //here it will be access as scope.config
      console.log(scope.config);
    },
    controller: function($scope,$attrs) {
      //you could put a watch to detect a changes on config
      $attrs.$observe('config', function(newV){
        console.log(newV);
      })
    }
  }
});

Updated Demo