Question

我正在尝试添加一些自定义角度指令以在多个视图上调用。那说，下面是我如何设置代码

app.js

angular
    .module('app', [
        'app.routes',
        'app.config',
        'app.users',
        'app.plans'
    ]);

usersCtrl.js

angular
    .module('app.users.controllers')
    .controller('usersCtrl', usersCtrl)

usersCtrl.$inject = ['$scope', '$http', '$window'];

function usersCtrl($scope, $http, $window) {
    /*controller code here*/
}

plansCtrl.js

angular
    .module('app.plans.controllers')
    .controller('plansCtrl', plansCtrl)

plansCtrl.$inject = ['$scope', '$http', '$window'];

function plansCtrl($scope, $http, $window) {
    /*controller code here*/
}

现在如果我添加指令来说明下面的用户

带有指令的

usersCtrl.js

angular
    .module('app.users.controllers')
    .controller('usersCtrl', usersCtrl)
    .directive('myFirstDirective', ['$window', function($window) {
        return {
            restrict: 'A',
            link: function (scope, element, attrs)
            {

                alert('my first directive')

            }
        };
    }]);

usersCtrl.$inject = ['$scope', '$http', '$window'];

function usersCtrl($scope, $http, $window) {
    /*controller code here*/
}

使用上面的设置，如果我在用户视图上调用指令它可以正常工作但是如果我在计划视图中调用它也可以。那就是说，什么是构造指令的最佳方式），在哪里放置自定义指令并访问需要的指令。

Answer 1

由于你的指令是独立于模块的，并且可以在不同的模块之间共享，我的建议是创建一个commonmodule并在该模块中声明你的指令。然后，您可以像其他模块一样将其注册到全局应用程序并使用它。

angular
    .module('app', [
        'app.routes',
        'app.config', 
        'app.commonmodule',
        'app.plans'
        'app.users',
        'app.plans'
    ]);

Answer 2

我认为你没有正确使用指令。

From AngularJS documentation:

在较高级别，指令是DOM元素上的标记（例如告诉AngularJS的属性，元素名称，注释或CSS类 HTML编译器（$ compile）将指定的行为附加到该DOM 元素（例如通过事件监听器），甚至转换DOM 元素及其子女。

在上面的代码中，您的指令与DOM元素无关。它只是发送警报。因此，您应该创建Service而不是指令来执行此操作。

构造自定义角度指令

2 个答案: