将指令 Isolate Scope Bindings 传递到其控制器 `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

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

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

Answer 2

将 bindToController property 设置为 true

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

bindToController

This property is used to bind scope properties directly to the controller. It can be either true or an object hash with the same format as the scope property.

When an isolate scope is used for a directive (see above), bindToController: true will allow a component to have its properties bound to the controller, rather than to scope.

After the controller is instantiated, the initial values of the isolate scope bindings will be bound to the controller properties. You can access these bindings once they have been initialized by providing a controller method called $onInit, which is called after all the controllers on an element have been constructed and had their bindings initialized.

— AngularJS Comprehensive Directive API Reference

---

使用$onInit生命周期钩子

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

$compile:

Due to bcd0d4, pre-assigning bindings on controller instances is disabled by default. It is still possible to turn it back on, which should help during the migration. Pre-assigning bindings has been deprecated and will be removed in a future version, so we strongly recommend migrating your applications to not rely on it as soon as possible.

Initialization logic that relies on bindings being present should be put in the controller's $onInit() method, which is guaranteed to always be called after the bindings have been assigned.

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