Question

我有指令动态设置给定应用程序状态的标题栏内容。

我希望能够访问当前视图的Controller中的函数和变量，但我只能访问RootCtrl。

该指令看起来像这样。

return {
    restrict: 'EA',
    template: "<div ng-include='getState()'></div>",
    transclude: true,
    scope: false,
    controller: ['$scope', '$state', function($scope, $state) {
        //some logic to retrieve and return the correct header template html
    }],
    link: function(scope, element, attrs){
        console.log(scope.test);
        console.log(scope.test2);
    }
}

和控制器。

.controller('RootCtrl', function($scope, $state, $location, $rootScope) {
    $scope.test = 'hello';
    //...
})

.controller('ContactsCtrl', function($scope, $state, CustomerService) {
    console.log('Contacts init');
    $scope.test2 = 'hello 2';
    //...
})

当我导航到contacts状态时，输出看起来像这样。

hello
undefined
Contacts init

如果我希望能够访问test2变量，我该怎么办？

Answer 1

您需要在指令中使用require属性。这将使链接函数中定义的控制器的范围可用作第4个参数。您可以在链接函数中以范围的形式访问范围。

您的代码可能如下所示：

return {
    restrict: 'EA',
    template: "<div ng-include='getState()'></div>",
    transclude: true,
    scope: false,
    require:['^RootCtrl', '^ContactsCtrl'], 
    controller: ['$scope', '$state', function($scope, $state) {
        //some logic to retrieve and return the correct header template html
    }],
    link: function(scope, element, attrs, requiredControllers){
        console.log(requiredControllers[0].test);
        console.log(requiredControllers[1].test2);
    }
}

请参阅Directives的Angular文档以获取更多示例（标题为创建通信指令）和^controller语法的说明。

在Angular指令中访问父控制器

1 个答案: