将指令隔离范围绑定传递给其控制器`this`上下文（AngularJS V1.6）

Question

如何将指令参数传递给其控制器？

我使用指令：

<directive value="ctrl.item"></directive>

.directive('directive', [ function () {
    return {
        restrict: 'AE',
        scope: {
            value: '=value'
        },
        templateUrl: 'item.html',
        controller: 'Item as item'
    };
}])

我想在指令的控制器中阅读value：

.controller('Item', [function Item () {

    console.log(this.value);
}])

是否可以使用 this ？

Answer 1

将bindToController property设置为true

.directive('directive', [ function () {
    return {
        restrict: 'AE',
        scope: {
            value: '=value'
        },
        //USE bindToController
        bindToController: true,
        templateUrl: 'item.html',
        controller: 'Item as item'
    };
}])

  

bindToController

     

此属性用于将范围属性直接绑定到控制器。它可以是true，也可以是与scope属性格式相同的对象哈希。

     

当将一个隔离范围用于指令时（参见上文），bindToController: true将允许组件将其属性绑定到控制器，而不是范围。

     

在实例化控制器之后，隔离范围绑定的初始值将绑定到控制器属性。通过提供一个名为$onInit的控制器方法，可以在初始化这些绑定后访问它们，该方法在构造了元素上的所有控制器并初始化其绑定后调用。

     

— AngularJS Comprehensive Directive API Reference

使用$onInit生命周期挂钩

.controller('Item', function Item () {
    this.$onInit = function() {    
        console.log(this.value);
    };
})

  

$compile

     

由于bcd0d4，默认情况下禁用控制器实例上的预分配绑定。仍然可以将其重新打开，这在迁移期间应该有所帮助。预分配绑定已被弃用，将在未来版本中删除，因此我们强烈建议您将应用程序迁移到不再尽快使用它。

     

依赖于存在的绑定的初始化逻辑应该放在控制器的$onInit()方法中，保证在分配之后始终被称为。< / p>      

— AngularJS Developer Guide - Migrating from V1.5 to V1.6

Answer 2

它应该在您的指令scope上，您可以在link方法中访问它，如下所示：

app.directive('directive', function () {
  return {
    restrict: 'AE',
    scope: {
        value: '='
    },
    templateUrl: 'item.html',
    link: function (scope, element, attrs) {
      console.log(scope.value);
    }
  };
});