Angularjs 指令仅在控制器文件中工作答案

【问题标题】：Angularjs directives working only in controller fileAngularjs 指令仅在控制器文件中工作
【发布时间】：2015-04-02 15:44:42
【问题描述】：

所以，使用 angularJS，我想将我的指令分隔在它们自己的文件中以更清晰。我尝试了一些在这里和其他地方找到的建议，但没有奏效。

目前我的指令位于控制器文件中，该文件也是我定义模块的文件。

Controller.js：

var app = angular.module("viewerApp", ["ngDialog"]);

app.config(['ngDialogProvider', function (ngDialogProvider) {
    ngDialogProvider.setDefaults({
        className: 'ngdialog-theme-default',
        plain: false,
        showClose: true,
        closeByDocument: true,
        closeByEscape: true,
        appendTo: false,
        preCloseCallback: function () {
            console.log('default pre-close callback');
        }
    });
}]);

app.controller('viewerController', function ($scope, $rootScope, ngDialog) {

/*
Here I have most of my $scope manipulations and functions
*/

});

app.controller('InsideCtrl', function ($scope, ngDialog) {

/*
Small controller to handle some dialog event
*/

});

app.directive('myDirective', function() {
    return {
        template: 'Directive, lang: {{ currentLanguage }}'

    };
})

然后在我的 HTML 文件中：

<body ng-keypress="handleKeys($event)" ng-controller="viewerController">

{{ "Default : " + defaultLanguage + " - Current : " + currentLanguage }}<br />
<my-directive></my-directive>

所以这种方式工作正常，我的测试模板按我想要的方式显示。

但是当我将指令对应的代码移动到一个新文件时，它就停止工作了。

仅供参考，我在新文件中尝试了以下内容：

app.directive('myDirective', function() {
    return {
        template: 'Directive, lang: {{ currentLanguage }}'

    }
});
/* ----------------- */
angular.module("viewerApp", ["ngDialog"]).directive('myDirective', function() {
    return {
        template: 'Directive, lang: {{ currentLanguage }}'

    };
})
/* ----------------- */
angular.module("viewerApp").directive('myDirective', function() {
    return {
        template: 'Directive, lang: {{ currentLanguage }}'

    };
})

我该如何解决这个问题？

问候。

【问题讨论】：

并且您已经在您的页面中使用<script> 标签包含了您的directive.js 文件？
是的，我做到了。在我在这里咨询任何答案之前，我找到了一个作为答案发布的解决方案。但我不确定这是一种正确的方法。

标签： angularjs angularjs-directive

【解决方案1】：

确保您正在加载新的指令文件以及：

您的全局 app 变量可供它使用
或使用angular.module("viewerApp") 检索模块

但是你必须有那个对模块的引用。

【讨论】：

【解决方案2】：

我不确定你如何定义控制器/指令关联的模块，所以我将重新开始。

我们将从在某个地方定义模块开始，比如在控制器文件中：

viewerModule = angular.module("viewerApp", ["ngDialog"])
viewerModule.controller('viewerController' ... )

在指令文件中你只需要引用模块

viewerModule = angular.module("viewerApp")
viewerModule.directive('myDirective' ... )

记住，没有方括号可以引用模块！

希望对你有帮助

【讨论】：

【解决方案3】：

创建 myDirective.js 后，请确保以下几点：

1. 将 myDirective.js 加载到您加载控制器的 html 页面，但在之后控制器：

<script src="path/to/myDirective.js" type="text/javascript"></script>

2. 为该指令创建 html 模板 (my-directive.html)

3. 回到您的指令脚本文件，在 return 对象内，添加以下内容：

restrict: "E",
templateUrl: '/app/templates/search.html'

4.现在在基础/父 html 文件中，将 <my-directive></my-directive> 添加到 body 元素

【讨论】：

【解决方案4】：

好吧，我只是设法通过添加一个包含该指令的新模块来使其工作。然后我在主模块依赖中添加了这个模块。

指令文件：

var app = angular.module("myDirective-directive", []);

app.directive('myDirective', function() {
    return {
        template: 'Directive, lang: {{ currentLanguage }}'
    };
});

在控制器文件中我改变了我的模块声明：

var app = angular.module('viewerApp', ["ngDialog", "myDirective-directive"]);

这个解决方案可以吗，还是不建议这样做？

【讨论】：

【解决方案5】：

如果 app 变量在你的指令文件Check out this link this will help you 中不是全局变量，则声明它

【讨论】：

【解决方案6】：

我不建议您将这种样式用于 Angular 模块。不要这样使用它

var app = angular.module("example",[...]);

以这种方式使用角度模块是一种很好的风格。

angular.module("example", [...]) ...
...
...

在另一个文件中

angular.module("example").directive(...) // or something else

【讨论】：