Angular Directive Does Not Load From JS FIle

Question

My directive is not loading from a .js file. Can you tell by the following information why this directive is not loading from a file?

My app.js file has

var app = angular.module('app', ['myDirectives']);

I have a directive .js file called mydirective.js

inside this file I have

(function () {
    'use strict';
    var app = angular.module('myDirectives', []);



  app.directive('myMonth', function () {
        return {
            restrict: 'AE',
            transclude: true,
            //priority: 1000,
            //scope: {
            //    month: '=month'
            //},
            template: '<select class="input-large" ng-model="month">' +
                '<option value="1">January</option>' +
                '<option value="2">February</option>' +
                '<option value="3">March</option>' +
                '<option value="4">April</option>' +
                '<option value="5">May</option>' +
                '<option value="6">June</option>' +
                '<option value="7">July</option>' +
                '<option value="8">August</option>' +
                '<option value="9">September</option>' +
                '<option value="10">October</option>' +
                '<option value="11">November</option>' +
                '<option value="12">December</option>' +
                '</select>',
            controller: function ($scope) {

            }
        };
    });
});

inside my index.html file I have

<my-month></my-month>

Can you tell me why this directive will not load from the mydirective.js file but it does load from the controller file? Thanks

Am assuming you are using some AMD loader right? do you get any errors on your console like $myDirectivesProvider doesn't exist? — Dayan Moreno Leon
– Dayan Moreno Leon, Commented Jun 19, 2014 at 15:23
I am not using any loaders right now. I am trying to follow the example defined here. jsfiddle.net/gh/get/angularjs/1.0.3/thinktecture/… — Nate
– Nate, Commented Jun 19, 2014 at 15:34
Original article about separating the directive. henriquat.re/modularizing-angularjs/… — Nate
– Nate, Commented Jun 19, 2014 at 15:36

jassok · Accepted Answer · 2014-06-19 16:04:51Z

2

Looks like you have some errors in syntax.

First:

var app = angular.module('app', ['myDirectives']);

You don't need to do that for directives. I'm by no means an expert on Angular JS though, so that could be the "correct" way to do it, its just not how I usually end up doing it.

Next:

template: '<select class="input-large" ng-model="month">' +

Should be:

template: [ '<select class="input-large" ng-model="month">',

You also need to make sure you include the file in index.html somewhere

Here's a working Plunker: http://plnkr.co/edit/xTthqwe2Yw7e9kO05ios

answered Jun 19, 2014 at 16:04

jassok

4313 silver badges12 bronze badges

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

1 Comment

Nate Over a year ago

The template change did not matter but the plunkr example helped. Both answers were on the correct path but I have to choose jassok's answer because of the plunkr example.

Ryan Abbott · Accepted Answer · 2014-06-19 16:16:26Z

2

In you app.js file, change

var app = angular.module('app', ['myDirectives']);

to

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

In your mydirective.js, remove this

var app = angular.module('myDirectives', []);

Otherwise you are declaring your app twice (once in the app.js, then again in the mydirective.js).

answered Jun 19, 2014 at 16:16

Ryan Abbott

5,4277 gold badges34 silver badges35 bronze badges

Collectives™ on Stack Overflow

Angular Directive Does Not Load From JS FIle

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related