Question

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()
        }
    };
});

Answer 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;
        }
    };
});

Answer 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();
            };
        }
    };
});

Answer 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();
        }
    };
});

Answer 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();
        }
    };
});

Access需要指令控制器中的控制器

4 个答案: