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

我正在关注有关pluralsight的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] 

---

无法找到指令“swPane”所需的控制器“swTabstrip”

您必须实际创建指令使用的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'

            }
        })
})();

如果您试图在指令之间共享数据，请查看服务。
您必须实际创建指令使用的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'

            }
        })
})();

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

属性使指令查找控制器。在您的示例中，有一个名为swTabstrip的指令。

require

属性使指令查找控制器。在您的示例中，有一个名为swTabstrip的指令。谢谢，这很有道理。在一个实际的项目中，我会使用一个服务，我只是按照教程来更好地掌握指令之间的通信。谢谢，这很有意义。在一个实际的项目中，我将使用一个服务，我只是按照教程来更好地掌握指令之间的通信。