Question

我有一个有效的角应用程序，但我想稍微重组一下。我有一堆指令并没有真正做任何事情，虽然整个应用程序应该由一个指令封装，但我仍然在指令之外有两个主控制器声明。

我合并了这两个控制器，因为虽然它们处理不同的问题（一个处理功能数据，另一个处理状态），但它们对于整个应用程序都是必需的。

其次，我想摆脱松散的声明并从以下地址开始：

<div ng-app="myApp" class="myApp" ng-cloak ng-controller="myController">
    <myAppdirective ng-controller="myNavigationController"></myAppdirective>
</div>

为：

angular.module('myApp').
    directive('myAppDirective', ['myController', function(myController) { {

        return {
            restrict: 'AE',
            replace: true,
            scope: true,
            controller: myController,
            template:   '<div>' +
                            '<ng-include src="\'partials/navigation.html\'">' +
                            '<ng-view></ng-view>' +
                        '</div>'
        };
}]);

神秘地说，这不起作用。这不行吗？

我收到此错误：https://docs.angularjs.org/error/ $ injector / unpr？p0 = myControllerProvider％20％3C-％20myController％20％3C-％20myAppDirective

我尝试在模板中使用ngController，但这让我TypeError: Cannot read property 'insertBefore' of null深入角度代码。

我不知所措。我可能做的事情从根本上说是错误的。但是什么？

解决方案：我恢复了两个控制器的合并。这恢复了我最初的关注点分离，并修复了那个神秘的TypeError。

我的指示现在看起来像这样：

(function() {
    'use strict';

    /*global angular */
    angular.module('myApp').
    directive('myAppDirective', function() {

        return {
            restrict: 'AE',
            replace: true,
            scope: true,
            controller: 'myController',
            template:   '<div ng-controller="myNavigationController">' +
                            '<ng-include src="\'partials/navigation.html\'"></ng-include>' +
                            '<ng-view></ng-view>' +
                        '</div>'
        };
    });
})();

这似乎工作正常。

Answer 1

我认为你不能注入控制器实例。这可能是错误发生的地方（基于该错误，看起来您在发布问题时重命名了实际的控制器名称）。您应该只需要为控制器属性使用字符串。

angular.module('myApp').
    directive('myAppDirective', [function() { {

        return {
            restrict: 'AE',
            replace: true,
            scope: true,
            controller: 'myController',
            template:   '<div>' +
                            '<ng-include src="\'partials/navigation.html\'">' +
                            '<ng-view></ng-view>' +
                        '</div>'
        };
}]);

请参阅How can I use a registered controller in my angular directive?

Answer 2

默认情况下，除非指定其他指令，否则每个指令的scope属性都设置为false。您将scope设置为true，然后应用指令所在的同一控制器。

简单地说，删除scope: true和controller: myController - 你的指令将从父控制器继承scope，一切都会好的。

如何将独立控制器移动到指令中？

2 个答案: