Question

因此，使用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 }}'

    };
})

我该如何解决这个问题？

问候。

Answer 1

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

您可以使用全局app变量
或使用angular.module("viewerApp")

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

Answer 2

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

我们首先在某个地方定义模块，比如说在控制器文件中：

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

在指令文件中，您只需要使用

引用该模块

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

请记住，没有方括号来引用模块！

我希望它有所帮助

Answer 3

创建 myDirective.js 后，请确保以下内容：

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

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

2。为该指令创建html模板（ my-directive.html ）

3。返回指令脚本文件，在返回对象中，添加以下内容：

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

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

Answer 4

好吧，我刚刚设法通过添加一个包含该指令的新模块来实现它。然后我在主模块依赖项中添加了这个模块。

指令文件：

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

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

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

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

此解决方案是否正常或是否建议不要这样做？

Answer 5

如果app变量在指令文件Check out this link this will help you

中不是全局变量，则声明它

Answer 6

我不建议您将该样式用于角度模块。不要像这样使用它

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

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

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

在另一个文件中

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

Angularjs指令仅在控制器文件中起作用

6 个答案: