structuring custom angular directives

Question

I am trying to add a few custom angular directives to be called on several views. that said, below is how I have the code setup

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*/
}

now if I add directive to say users like below

usersCtrl.js with a directive attached

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*/
}

with the above setting if I call directive on users view it works as it should but then if I call it within plan view it also works. that being said, what's the best way to structure directives), where to place custom directive and access those where needed.

What do you mean "best way to structure directives" and "where to place custom directive and access those where needed."? Please make your question more specific — Alon Eitan
– Alon Eitan, Commented May 18, 2017 at 14:27
wanna create a few helper directives, say for image upload and call them where needed — user1751287
– user1751287, Commented May 18, 2017 at 14:39

Kumar Nitesh · Accepted Answer · 2017-05-18 14:27:39Z

1

Since your directive is module independent and can be shared between different module, my suggestion would be to create a commonmodule and declare your directive in that module. Then you can either register that to global app like other module and use it.

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

answered May 18, 2017 at 14:27

Kumar Nitesh

1,65215 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Arashsoft · Accepted Answer · 2017-05-26 14:34:22Z

0

I think you are not using directives correctly.

From AngularJS documentation:

At a high level, directives are markers on a DOM element (such as an attribute, element name, comment or CSS class) that tell AngularJS's HTML compiler ($compile) to attach a specified behavior to that DOM element (e.g. via event listeners), or even to transform the DOM element and its children.

In the above code, your directive has nothing to do with the DOM elements. It just sends an alert. Therefore you should create a Service instead of directive to do so.

answered May 26, 2017 at 14:34

Arashsoft

2,7776 gold badges37 silver badges61 bronze badges

Collectives™ on Stack Overflow

structuring custom angular directives

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related