AngularJs directive not working/visible

Question

I'm just getting started with AngularJs. And I'm trying to implement a login directive. But I don't see the output? I've no errors in my console.

My application structure:

(index.html is not visible)

login.directive.js :

(function() {
    'use strict';

    angular
        .module('lnjapp.login',[])
        .directive('login', login);

    function login() {
        var directive = {
            template: '<p>test</p>',
            //restrict: 'E',
            Controller: LoginController,
            controllerAs: 'vm'
        };
        return directive;
    }   
})();

app.js :

(function () {
    'use strict';

    angular.module('lnjapp', ['ngRoute', 'ngCookies', 'angular.filter','lnjapp.login','lnjapp.config'])
    .constant('GLOBALS', {
        url:'http://domain.dev/api/v1/'
    });

    $(document).ready(function() {
        $.material.init();
    });
})();

app/pages/login.html:

<login></login>

--EDIT--

login.controller.js:

(function() {
    'use strict';

    angular.module('lnjapp.login',[])
    .controller('LoginController', LoginController);

function LoginController()
{}
})();

route-config.js:

angular
    .module('lnjapp.config',[])
    .config(config);

function config($routeProvider) {
    $routeProvider
        .when('/', {
            templateUrl: '/app/pages/login.html'
        });
}

What am I doing wrong here?

Have you tried uncommenting the restrict property? The angular documentation says that it defaults to element or attribute, but I swear I ran into this before. — mdickin
– mdickin, Commented May 22, 2016 at 19:10
There isn't enough information here to troubleshoot your issue. It is possible that it could be an issue with the route to the page, which you aren't showing here; Also, directives which declare a controller will not load if the controller does not exist, so it is possible that it is a problem with the controller definition, which you also haven't listed here. — Claies
– Claies, Commented May 22, 2016 at 19:13
Controller: LoginController, should be lowercase "controller". Not sure if that will fix everything though — mdickin
– mdickin, Commented May 22, 2016 at 19:18

Claies · Accepted Answer · 2016-05-22 20:00:58Z

2

You are creating your lnjapp.login twice, once in login.directive.js and again in login.controller.js. The second time the module is created, it overwrites the first, and whatever was created in the first file will no longer be accessible.

You should always only create a module once, and get the already created module to add additional features in all other cases.

Set (create): angular.module('lnjapp.login',[])

Get (consume): angular.module('lnjapp.login')

For more info and other best practices, see John Papa's excellent Angular Style Guide.

edited May 22, 2016 at 20:00

answered May 22, 2016 at 19:55

Claies

22.4k4 gold badges56 silver badges81 bronze badges

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

Collectives™ on Stack Overflow

AngularJs directive not working/visible

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related