将指令隔离作用域绑定传递给其控制器“this"上下文(AngularJS V1.6) [英] Pass Directive Isolate Scope Bindings to its Controller `this` Context (AngularJS V1.6)

问题描述

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

我使用指令:

.directive('directive', [ function () {返回 {限制:'AE'，范围: {价值:'=价值'},templateUrl: 'item.html',控制器:'项目作为项目'};}])

我想在指令的控制器中读取 value :

.controller('Item', [function Item() {控制台日志(this.value)；}])

是否可以使用this?

解决方案

设置 bindToController 属性 到 true

.directive('directive', [ function () {返回 {限制:'AE'，范围: {价值:'=价值'},//使用绑定到控制器bindToController: 真，templateUrl: 'item.html',控制器:'项目作为项目'};}])

<块引用>

bindToController

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

当隔离作用域用于指令(见上文)时，bindToController: true 将允许组件将其属性绑定到控制器，而不是作用域.

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

—AngularJS 综合指令 API 参考

<小时>

使用 $onInit 生命周期钩子

.controller('Item', function Item() {this.$onInit = function() {控制台日志(this.value)；};})

<块引用>

$compile:

由于 bcd0d4，禁用了对控制器实例的预分配绑定默认情况下.仍然可以重新打开它，这在迁移过程中应该会有所帮助.预分配绑定已被弃用，并将在未来版本中移除，因此我们强烈建议您尽快迁移您的应用程序，不要依赖它.

依赖于绑定存在的初始化逻辑应该放在控制器的$onInit() 方法中，保证总是在绑定被分配后被调用.

—AngularJS 开发者指南 - 从 V1 迁移.5 到 V1.6

How to pass directive parameter to its controller?

I use directive:

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

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

I want to read value inside a directive's controller:

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

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

Is it possible to do using this?

解决方案

Set the bindToController property to 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

---

Use the $onInit life-cycle hook

.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

这篇关于将指令隔离作用域绑定传递给其控制器“this"上下文(AngularJS V1.6)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！