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.htmlvm.test is empty?

What could be wrong here?

swap login.controller for 'loginController'
– Lucas
CommentedMay 23, 2016 at 14:46 — Lucas, CommentedMay 23, 2016 at 14:46

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

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; } })();

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 — Jamie, CommentedMay 23, 2016 at 16:37
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. — Suneet Bansal, CommentedMay 23, 2016 at 17:06
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. — Suneet Bansal, CommentedMay 24, 2016 at 5:00

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

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; } })();

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

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

Collectives™ on Stack Overflow

AngularJs controller data not visible in html directive

3 Answers 3

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Related