After studying various different projects and reading as much documentation as I can handle, I've run into an issue with how to include directives in my app. The app is setup like the following:

app.js - just the top part

angular.module('ngDashboard', ['ngCookies','ngResource','ngDashboard.filters', 'ngDashboard.services', 'ngDashboard.directives'])

All of the modules work fine except (it is an app rewritten from an example) for the directives which don't work at all:

directives.js - The following does NOT work and doesn't execute the directive on the view:

angular.module('ngDashboard.directives', []).
  directive('funkyElement', function () {
    return {
        restrict: 'E',
        transclude: true,
        scope: 'isolate',
        template: '<div>gonna parse this: {{orig}} <br/>... and get this: {{obj}}</div>',
        //templateUrl: 'template.html',
        pile:function (element, attr, transclusionFunc) {
            return function (scope, iterStartElement, attr) {
                var origElem = transclusionFunc(scope);
                var content = origElem.text();
                scope.orig = content;
                scope.obj = my_custom_parsing(content);
            };
        }
    };
});

The following in the same directives.js file does work properly and the directive executes:

angular.module('ng').directive('funkyElement', function () {
    return {
        restrict: 'E',
        transclude: true,
        scope: 'isolate',
        template: '<div>gonna parse this: {{orig}} <br/>... and get this: {{obj}}</div>',
        //templateUrl: 'template.html',
        pile:function (element, attr, transclusionFunc) {
            return function (scope, iterStartElement, attr) {
                var origElem = transclusionFunc(scope);
                var content = origElem.text();
                scope.orig = content;
                scope.obj = my_custom_parsing(content);
            };
        }
    };
});

The HTML is simple:

<funky-element>
    Parse me... e ooooon! Just parse meee!
</funky-element>

My question is, what is the proper way to include a set of directives and perhaps why the first example (using the ngDashboard.services) does not work.

After studying various different projects and reading as much documentation as I can handle, I've run into an issue with how to include directives in my app. The app is setup like the following:

app.js - just the top part

angular.module('ngDashboard', ['ngCookies','ngResource','ngDashboard.filters', 'ngDashboard.services', 'ngDashboard.directives'])

All of the modules work fine except (it is an app rewritten from an example) for the directives which don't work at all:

directives.js - The following does NOT work and doesn't execute the directive on the view:

angular.module('ngDashboard.directives', []).
  directive('funkyElement', function () {
    return {
        restrict: 'E',
        transclude: true,
        scope: 'isolate',
        template: '<div>gonna parse this: {{orig}} <br/>... and get this: {{obj}}</div>',
        //templateUrl: 'template.html',
        pile:function (element, attr, transclusionFunc) {
            return function (scope, iterStartElement, attr) {
                var origElem = transclusionFunc(scope);
                var content = origElem.text();
                scope.orig = content;
                scope.obj = my_custom_parsing(content);
            };
        }
    };
});

The following in the same directives.js file does work properly and the directive executes:

angular.module('ng').directive('funkyElement', function () {
    return {
        restrict: 'E',
        transclude: true,
        scope: 'isolate',
        template: '<div>gonna parse this: {{orig}} <br/>... and get this: {{obj}}</div>',
        //templateUrl: 'template.html',
        pile:function (element, attr, transclusionFunc) {
            return function (scope, iterStartElement, attr) {
                var origElem = transclusionFunc(scope);
                var content = origElem.text();
                scope.orig = content;
                scope.obj = my_custom_parsing(content);
            };
        }
    };
});

The HTML is simple:

<funky-element>
    Parse me... e ooooon! Just parse meee!
</funky-element>

My question is, what is the proper way to include a set of directives and perhaps why the first example (using the ngDashboard.services) does not work.

• javascript
• angularjs
• angularjs-directive

• Could you send a plunker with the live code? It is next to impossible to say what is going on without seeing more code. Based on what I can see so far I presume that you are not initialing your app by using ng-app="ngDashboard" or have things mixed up when including files. Once again, live code will clearly show all this. – pkozlowski.opensource Commented Apr 21, 2013 at 16:57
• I will post some live code, but the entire app works fine, all the services, controllers, the only thing that does not function properly is the directive. – lucuma Commented Apr 21, 2013 at 17:05
• It was either that the app.js file was cached or I didn't hit save after adding the directive dependency. After messing around with it for so long I doubt that it wasn't saved but I'm open to that possibility. – lucuma Commented Apr 21, 2013 at 18:43

1 Answer 1

It turns out that the app.js file I had was either cached so the directive dependency wasn't there or I had neglected to save it (both possible with weekend work and late nights). Since this issue was fixed after I made an update to app.js I'll mark this as resolved with the advice of:

1. Check the scripts console to make sure your files aren't cached
2. Turn off caching pletely, or use the incognito mode.
3. Always make sure the ng-app is added to your document (wasn't the case but could help someone else)
4. Make sure you save your files
5. Drink more coffee when you are tired and learning a new programming language/framework.

Lastly with regards to Angular, I had not realized you could add directives to the ng module and they'd bee available. I'm sure this isn't a best practice, but for testing and putting together quick code, it may e in handy.