AngularJS binding issue

Question

I am in the process of upgrading a large AngularJS 1.4 app to 1.5 using components instead of raw controllers.

I have a basic component looking like this:

 'use strict';

 angular.module('myModule').component('userComponent', {
 controllerAs: 'vm',
 bindings: {
    user: '<'
 },
 controller:
    function userComponent($http) {
      let vm = this;
      vm.user = "World";
 });

When I try to display the value of vm.user in the template, it does not show and there is no error in the console:

 <user-component>
    <h1>Hello {{vm.user}}</h1>
 </user-component>

Can you tell me what is wrong? This should be fairly simple and I am not sure why it is not doing the binding as expected.

Zooly · Accepted Answer · 2018-08-20 13:36:19Z

1

You can't fill a component template like that. You have to define a template linked to your component.

 'use strict';

 angular.module('myModule').component('userComponent', {
 controllerAs: 'vm',
 template: '<h1>Hello {{vm.user}}</h1>',
 bindings: {
    user: '<'
 },
 controller:
    function UserComponent($http) {
      let vm = this;
      vm.user = "World";
 });

edited Aug 20, 2018 at 13:36

answered Aug 20, 2018 at 13:34

Zooly

4,7974 gold badges40 silver badges55 bronze badges

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

3 Comments

Aleksey Solovey Over a year ago

shouldn't component names start with a lower case letter: 'userComponent'?

George Over a year ago

@AlekseySolovey Yes they should, I forgot to mention that in my answer, plus there is a missing curly brace after the controller definition

Nizar B. Over a year ago

@AlekseySolovey Good spot but this is not the actual issue. I edited my post to remove the upperCase component name. Thank you.

George · Accepted Answer · 2018-08-20 13:36:47Z

1

I don't see a templateUrl or template definition in your component, which are required.

You can add this template:"<span>Name: {{vm.user}}</span>" or link a html page. You can read more in the documentation here

(function(angular) {
  'use strict';
  angular.module('test', []).controller('MainCtrl', function MainCtrl() {});


  angular.module('test').component('userComponent', {
    controllerAs: 'vm',
    bindings: {
      user: '<'
    },
    controller: function UserComponent($http) {
      let vm = this;
      vm.user = "World";
    },
    template: "<span>Name: {{vm.user}}</span>"
  });
})(window.angular);

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.10/angular.min.js"></script>

<body ng-app="test">
  <!-- components match only elements -->
  <div ng-controller="MainCtrl as ctrl">
    <user-component></user-component>
  </div>
</body>

edited Aug 20, 2018 at 13:36

answered Aug 20, 2018 at 13:33

George

6,7592 gold badges31 silver badges36 bronze badges

5 Comments

Nizar B. Over a year ago

I do have templateUrl in my route.js file like this: .state('operatorHome', { url: '/user', component: 'UserComponent', views: { '': { templateUrl: 'templates/user/user.html' } }, })

Nizar B. Over a year ago

I would like to add the templateUrl inside my component but this will create a 404 not found Error.

Zooly Over a year ago

As George shown you, you can use template and write in directly your component your HTML template

Nizar B. Over a year ago

@Zooly the template will be quite large, I'm not very comfortable in doing this.

George Over a year ago

@NizarB. Looking at ui-routers documentation (which is what I assume you're using) the template/templateUrl has to be defined on the component, although you've mentioned that moving it causes a 404, can you not just update it to have the right relative url? Not knowing your project folder structure I can't answer what you'd need to change it to

Collectives™ on Stack Overflow

AngularJS binding issue

2 Answers 2

3 Comments

5 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

5 Comments

Related