引用 Angular 指令时的问题答案

【问题标题】：Issue when referencing Angular directives引用 Angular 指令时的问题
【发布时间】：2016-12-15 21:38:24
【问题描述】：

我试图在我的项目中实现 AngularJs 指令，但我遇到了这个问题。我有 App.js、ControllerA（其中包括一个指令）和 ControllerB。请注意，两个控制器位于不同的文件夹中：FolderA 用于 ControllerA，FolderB 用于 ControllerB

我想将在 html 文件中的 ControllerA 中创建的指令调用到 FolderB 中。

问题是当我尝试加载应用程序时，Angular 抱怨模块注入器：

未捕获的错误：[$injector:modulerr] 无法实例化模块 private_home 由于：(…)

App.js

'use strict';

angular.module("private_home", ['private.controllers'])

    .config(['$stateProvider', '$translateProvider', '$urlRouterProvider',
             function($stateProvider, $translateProvider, $urlRouterProvider){

        ...
    }]);

控制器A

'use strict';

angular.module("private.controllers", [])

    .controller('ControllerA' ,['$scope', function($scope){

        $scope.users= [...];

    .directive('ControllerADirective' ,['controllerADirective', function(){

        return{

            restrict : 'E',

            templateUrl : 'find.htm',

            controller : 'ControllerA',

            controllerAs : 'CotrollerADirective',

            bindToController: true
        }
}]);

ControllerB（我知道这不是必须的，但以防万一……）

'use strict';

angular.module("private.controllers")

    .controller('ControllerB' ,['$scope', function($scope){

    }]);

我用这个标签在 html 中调用指令：

/控制器指令 >

提前致谢！！

【问题讨论】：

.directive('ControllerADirective' ,['controllerADirective', function(){：该函数中没有注入任何东西，并且没有名为“controllerADirective”的服务，所以它应该只是.directive('ControllerADirective', function() {。当您询问错误时，请发布准确且完整的错误消息。阅读消息可以知道错误是什么。这就是错误有消息的原因。
确保指令名称在声明中采用驼峰命名法：.directive('controllerADirective' ...

标签： angularjs angularjs-directive

【解决方案1】：

您没有关闭控制器声明。它们都在模块本身上声明，实际上与将控制器附加到指令时完全相反。

一旦附加到模块，控制器就可以附加到任何模板或指令，并为每个模板或指令创建一个新的实例。

在模块上声明后，可以从任何控制器或模板调用指令，并再次使用每个声明创建一个新实例。

'use strict';

angular.module("private.controllers", [])

.controller('ControllerA' ,['$scope', function($scope){

    $scope.users= [...];
}])

.directive('ControllerADirective' ,['controllerADirective', function(){

    return{

        restrict : 'E',

        templateUrl : 'find.htm',

        controller : 'ControllerA',

        controllerAs : 'CotrollerADirective',

        bindToController: true
    }
}]);

【讨论】：

【解决方案2】：

指令定义中有错误。定义应该是这样的：

.directive('controllerADirective' , function(){
    return{
        template : 'This is a Directive',
    }
});

检查这个工作 Plunker https://plnkr.co/edit/VmHrDGFZo4brhBi1Ow0w?p=preview

【讨论】：