Question

我正在关注复数视频的joe eames教程。这看起来相当简单。我在另一个内部设置一个指令，并在子控制器上设置 * require：*

以下是我从演示中获得的代码。我正在使用angular 1.5我没有将$ scope更改为controllerAs，因为我专注于找出指令控制器之间的通信。

(function() {
'use strict';
angular
    .module('app', [])
    .controller('mainCtrl', function($scope) {

    })

    .directive('swTabstrip', function() {
        return {
            restrict: 'E',
            transclude: true,
            scope: {},
            controller: function($scope) {
                $scope.panes = [];
                $scope.select = function(pane) {
                    pane.selected = true;
                    $scope.panes.forEach(function(curPane) {
                        if(curPane !== pane) {
                            curPane.selected = false;
                        }
                    })
                }

                this.addPane = function(pane) {
                    $scope.panes.push(pane);
                    if($scope.panes.length ===1) {
                        pane.selected = true;
                    }
                }
            },
            templateUrl: 'swTabstrip.html'
        }
    })

    .directive('swPane', function() {
        return {
            restrict: 'E',
            transclude: true,
            scope: {
                title: '@'
            },
            require: '^swTabstrip',
            link: function(scope, el, attrs, tabstripCtrl) {
                tabstripCtrl.addPane(scope);
            },
            templateUrl: 'swPane.html'

        }
    })
})();

本教程要求我设置指令 swPane 以要求'swTabstrip'。但是，我在控制台中收到错误

3angular.js:13156 Error: [$compile:ctreq]

Controller 'swTabstrip', required by directive 'swPane', can't be found!

Answer 1

你必须实际创建你的指令使用的tabstripCtrl，同时你可以传入它：

(function () {
    'use strict';
    angular
        .module('app', [])
        .controller('mainCtrl', function ($scope) {})
        .controller('tabstripCtrl', function($scope) {
            $scope.panes = [];
            $scope.select = function (pane) {
                pane.selected = true;
                $scope.panes.forEach(function (curPane) {
                    if (curPane !== pane) {
                        curPane.selected = false;
                    }
                })
            }

            this.addPane = function (pane) {
                $scope.panes.push(pane);
                if ($scope.panes.length === 1) {
                    pane.selected = true;
                }
            }
        })
        .directive('swTabstrip', function () {
            return {
                restrict : 'E',
                transclude : true,
                scope : {},
                controller : 'tabstripCtrl' ,
                templateUrl : 'swTabstrip.html'
            }
        })
        .directive('swPane', function () {
            return {
                restrict : 'E',
                transclude : true,
                scope : {
                    title : '@'
                },
                require : '^tabstripCtrl',
                link : function (scope, el, attrs, tabstripCtrl) {
                    tabstripCtrl.addPane(scope);
                },
                templateUrl : 'swPane.html'

            }
        })
})();

如果您尝试在指令之间共享数据，请查看服务。

从单独的指令访问控制器导致意外的错误

1 个答案: