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

问题描述 投票:4回答: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) {
            mainCtrl.funcA()
        }
    };
});

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

就像是:

app.directive('addProduct', function () {
    return {
        restrict: 'E',
        require: '^mainCtrl',
        controller: function (scope, mainCtrl) {
            mainCtrl.funcA()
        }
    };
});
angularjs angularjs-directive
4个回答
4
投票

您仍然需要使用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;
        }
    };
});

1
投票

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

0
投票

这是我的解决方案:

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

0
投票

将控制器传递给链接功能上的范围,然后访问控制器上的范围。像这样:

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();
        }
    };
});
© www.soinside.com 2019 - 2024. All rights reserved.