Initializing angular controller variables

Question

I am having an issue where my controller variables are not being initialized correctly as per the controller code.

The controller code is

  angular.module('test')
  .controller('RegisterCtrl', function RegisterCtrl($scope) {
var vm = this;
   vm.model = {companyName:'aaa'};
    vm.data= [{fieldtype: 'input',key:'companyName'}]; 
});

The ui-router is

  .state('register', {
        //     abstract: true,
        url: "/register",
        templateUrl: "/views/register.html",
        controller: 'RegisterCtrl',
        controlleras: 'vm'
      })

I have a verify basic html to show the output of model:

<h2>Model</h2>
<pre>{{vm.model }}</pre>

When debugging the code in chrome it passes through the controller code and sets both model and data correctly, but when the page has finished loading the vm.model is blank.I am not sure what I am doing incorrectly.

Thanks in advance.

The state configuration object for ui-router does not have a controlleras property. You need to specify it in your controller property instead (i.e. controller: 'RegisterCtrl as vm'). — miqh
– miqh, Commented Dec 3, 2015 at 0:42
@miqid actually, it does, but it's case sensitive. it is controllerAs. This is a simple typo. — Claies
– Claies, Commented Dec 3, 2015 at 0:59
@Claies, my bad! Indeed it does. Only two table rows down in the documentation too. :-( — miqh
– miqh, Commented Dec 3, 2015 at 1:02

haakon.io · Accepted Answer · 2015-12-03 00:38:08Z

0

Try using this as your HTML body tag:

<body ng-controller="RegisterCtrl as vm" ng-app="test">

answered Dec 3, 2015 at 0:38

haakon.io

4876 silver badges20 bronze badges

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

Comments

que1326 · Accepted Answer · 2015-12-03 01:03:17Z

0

Instead of var, I would advice you to use $scope.model, for this purpose

angular.module('test')
 .controller('RegisterCtrl',['$scope',function($scope) {
   $scope.model = {
                    companyName:'aaa'
                  };
   $scope.data= [
                 {
                   fieldtype: 'input',
                   key:'companyName'
                 }
                ]; 
 }]);

HTML

<h2>Model</h2>
<pre ng-bind="model.companyName"></pre>
<pre>{{model.companyName}}</pre>
<pre>{{model}}</pre>

edited Dec 3, 2015 at 1:03

answered Dec 3, 2015 at 0:47

que1326

2,3454 gold badges43 silver badges59 bronze badges

Collectives™ on Stack Overflow

Initializing angular controller variables

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related