Angularjs directives working only in controller file

Question

So, using angularJS, I want to separate my directives in their own files for more clarity. I tried some suggestions I found here and elsewhere but it didn't work.

For now my directive is in the controller file which is also the file where I define my module.

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 }}'

    };
})

Then in my HTML file :

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

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

So this way it is working fine, I got my test template displayed just like I want.

But when I move the code corresponding to the directive to a new file, it stops working.

FYI I tried the following in the new file :

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 }}'

    };
})

How can I fix this ?

Regards.

Yes I did. I found a solution I posted as answer before I consult any answer here. But I'm not sure this is a proper way to do it. — Ellone, Apr 02 '15 at 16:25

score 0 · Answer 1 · answered Apr 02 '15 at 15:51

0

Make sure you're loading your new directives file and also that:

either your global app variable is available to it
or retreive the module using angular.module("viewerApp")

But you must have that reference to the module.

answered Apr 02 '15 at 15:51

Shomz

37,421
4
57
85

score 0 · Answer 2 · answered Apr 02 '15 at 15:54

I'm not sure how are you defining the module to which the controller/directive are getting associated, so I'll start afresh.

We'll start by defining the module somewhere, let's say in the controller file:

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

And in the directive file you'll just have to reference the module with

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

Remember, no square brackets to reference the module!

I hope it helps

score 0 · Answer 3 · answered Apr 02 '15 at 16:02

after you create myDirective.js, make sure of the following:

1. load myDirective.js to the html page where you loaded the controller, but after that controller:

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

2. create your html template for that directive (my-directive.html)

3. back to your directive script file, inside the return object, add the following:

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

4. now in the base/parent html file, add <my-directive></my-directive> to the body element

score 0 · Answer 4 · answered Apr 02 '15 at 16:21

Well, I just managed to make it work by adding a new module containing the directive. Then I added this module in the main module dependencies.

directive file :

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

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

And in controller file I changed my module declaration like this :

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

Is this solution OK or is it not recommended to do it this way ?

score 0 · Answer 5 · edited May 23 '17 at 12:06

0

declare app variable if it is not global in your directive file Check out this link this will help you

edited May 23 '17 at 12:06

Community

1
1

answered Apr 02 '15 at 16:49

Harpreet Singh

44
4

score 0 · Answer 6 · answered Apr 03 '15 at 14:50

I don't suggest you to use that style for angular module. Don't use it like this

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

It's good style to use an angular module like this way.

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

Inside another file

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

Angularjs directives working only in controller file

6 Answers6