AngularJs controller data not visible in html directive

Question

I've made a login directive that looks like this:

directive login

  (function() {
        'use strict';

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

        function login() {
            var directive = {
                templateUrl: '/app/components/login/login.html',
                restrict: 'E',
                Controller: login.controller,
                controllerAs: 'vm'
            };
            return directive;
        }   
    })();

login.controller

(function() {
    'use strict';

    angular
        .module('lnjapp.login')
        .controller('loginController', loginController);

    function loginController()
    {
        var vm = this;
        vm.test = 'test';
    }
})();

login.html

        <div class="form-group pull-left">
            <label>
                <b>d{{ vm.test }}</b>
                <input type="checkbox" name="remember">&nbsp;&nbsp;&nbsp;&nbsp;Onhoud mij
            </label>
            <br>
            <a ng-href="#/wachtwoord/vergeten">Wachtwoord Vergeten?</a>
        </div>

In login.html vm.test is empty?

What could be wrong here?

swap login.controller for 'loginController'

Lucas
– Lucas

2016-05-23 14:46:50 +00:00
Commented May 23, 2016 at 14:46 — Lucas
– Lucas, Commented May 23, 2016 at 14:46

Suneet Bansal · Accepted Answer · 2016-05-23 14:59:53Z

1

There are two issues here: 1. Controller name is incorrect in the directive 2. Controller name should be in single quotes

Try below code:

(function() {
        'use strict';

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

            function loginController()
            {
              var vm = this;
              vm.test = 'test';
            };

        function login() {
            var directive = {
                templateUrl: '/app/components/login/login.html',
                restrict: 'E',
                controller: 'loginController',
                controllerAs: 'vm'
            };
            return directive;
        }   
    })();

edited May 23, 2016 at 14:59

answered May 23, 2016 at 14:52

Suneet Bansal

2,7061 gold badge16 silver badges18 bronze badges

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

4 Comments

Jamie Over a year ago

Thankyou that's working. But when I put the controller in a separated file it's not? The controller is linked in my index.html

Suneet Bansal Over a year ago

Yes this can be happened and the reason is, when you create controller is a separate file since you are creating 'lnjapp.login' module in a separate file so there may be the case that 'lnjapp.login' module is not available and we are creating controller over it. So if you have decided to put controllers and services in the different file then you will have to make sure the before adding controllers/services over it, module is created and ready to use.

Jamie Over a year ago

Is it a bad practice to put it in the same file?

Suneet Bansal Over a year ago

yes if you have too many modules in your project then you should not be using single file. You can use RequireJS/CoomonJS to modularize your application and dependencies.

AlainIb · Accepted Answer · 2016-05-23 14:47:07Z

0

in the directive in should be a variable name not a file name

  (function() {
    'use strict';

    angular
        .module('lnjapp.login',[])
        .directive('login', login);
    function loginController()
    {
       var vm = this;
       vm.test = 'test';
    }
    function login() {
        var directive = {
            templateUrl: '/app/components/login/login.html',
            restrict: 'E',
            Controller: loginController,
            controllerAs: 'vm'
        };
        return directive;
    }   
})();

answered May 23, 2016 at 14:47

AlainIb

4,6156 gold badges42 silver badges67 bronze badges

Comments

Bas Pauw · Accepted Answer · 2016-05-23 14:49:44Z

0

In order to access controller data from the view, you should bind it to the scope. So in your case you should user $scope.vm = "test"; and in the view only use {{vm}} that should do the trick as far as I can see.

For further information about AngularJS's two way data binding see: https://docs.angularjs.org/tutorial/step_04

answered May 23, 2016 at 14:49

Bas Pauw

2622 silver badges12 bronze badges

Collectives™ on Stack Overflow

AngularJs controller data not visible in html directive

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related