指令控制器中的访问需要控制器答案

【问题标题】：Access require controller in a directive controller指令控制器中的访问需要控制器
【发布时间】：2015-05-13 21:03:51
【问题描述】：

app.directive('mainCtrl', function () {
    return {
        controller: function () {
            this.funcA = function(){}
        }
    };
});

app.directive('addProduct', function () {
    return {
        restrict: 'E',
        require: '^mainCtrl',
        link: function (scope, lElement, attrs, mainCtrl) {
            mainCtrl.funcA()
        }
    };
});

我不想使用链接方法，而是使用控制器方法。有没有办法在指令 addProduct 的控制器方法中获取 mainCtrl。

类似：

app.directive('addProduct', function () {
    return {
        restrict: 'E',
        require: '^mainCtrl',
        controller: function (scope, mainCtrl) {
            mainCtrl.funcA()
        }
    };
});

【问题讨论】：

你可以制作一个独立的控制器并将其添加到两个指令中
以下答案是否解决了您的问题？

标签： angularjs angularjs-directive

【解决方案1】：

您仍然需要使用link 函数，因为控制器是在那里注入的。但是，您可以请求指令自己的控制器，然后将另一个所需的控制器设置为其属性：

app.directive('addProduct', function () {
    return {
        restrict: 'E',
        require: ['addProduct','^mainCtrl'],
        controller: function ($scope) {
            // this.mainCtrl is still not set here
            // this.mainCtrl.funcA(); // this will cause an error

            // but typically it is invoked in response to some event or function call
            $scope.doFuncA = function(){
               this.mainCtrl.funcA();
            }
        },
        link: function(scope, element, attrs, ctrls){
          var me = ctrls[0], mainCtrl = ctrls[1];
          me.mainCtrl = mainCtrl;
        }
    };
});

【讨论】：

或者您可以将其添加到范围内，而不需要自己的控制器。

【解决方案2】：

从 AngularJS 1.5 开始，您可以使用控制器的 $onInit 生命周期钩子。如documentation of require 中所写，当将require 定义为对象并将bindToController 设置为true 时，在构造控制器之后但在$onInit 方法之前将所需的控制器作为属性添加到控制器中正在运行。所以代码看起来像这样：

app.directive('mainCtrl', function () {
    return {
        controller: function () {
            this.funcA = function(){}
        }
    };
});

app.directive('addProduct', function () {
    return {
        restrict: 'E',
        require: {
            myParentController: '^mainCtrl'
        },
        bindToController: true,
        controller: function ($scope) {
            this.$onInit = function() {
                this.myParentController.funcA();
            };
        }
    };
});

【讨论】：

【解决方案3】：

这是我的解决方案：

app.directive('mainCtrl', function () {
    return {
        controllerAs: 'main',
        controller: function () {
            this.funcA = function(){}
        }
    };
});

app.directive('addProduct', function () {
    return {
        restrict: 'E',
        require: '^mainCtrl',
        controller: function ($scope) {
            $scope.main.funcA();
        }
    };
});

【讨论】：

如果我想使用 ngModelController 怎么办
它不适用于角度指令，但它是定制指令的一个很好的解决方案

【解决方案4】：

将控制器传递给链接函数的作用域，然后访问控制器上的作用域。像这样：

app.directive('mainCtrl', function () {
       return {
            controller: function () {
                this.funcA = function(){}
            }
        };
    });

app.directive('addProduct', function () {
    return {
        restrict: 'E',
        require: '^mainCtrl',
        link: function (scope, lElement, attrs, mainCtrl) {
            scope.ctrl=mainCtrl;
        },controller:function($scope){
            $scope.ctrl.funcA();
        }
    };
});

【讨论】：