AngularJs指令不起作用/不可见

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?

Answer 1

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 .