75

I'm writing a simple angular component. I'm passing a parameter as a binding and display its value on the screen. All works fine: I can see the parameter being displayed on the screen.

Component:

var app = angular.module("test", []);
app.component("test", {
  bindings: {
    "contactId": "<"
  },
  controllerAs: "model",
  controller: () => {
    //output: 'contact id from controller: undefined'
    console.log(`contact id from controller: ${this.contactId}`);
  },
  template: "<div>Contact id from view: {{model.contactId}}</div>"
});

Html:

<test contact-id="8"></test>

However, when I try to access the binding from within the controller (see the console.log), the binding value is undefined. I don't understand how it can be available in the view, but not in the controller.

What am I doing wrong?

Here's a plnkr illustrating the problem.

Flip
  • 6,233
  • 7
  • 46
  • 75
fikkatra
  • 5,605
  • 4
  • 40
  • 66

9 Answers9

71

When using angular's components, there is a point where the controller hasn't been wired up via the internal linking. If you're trying to do this in the constructor of your controller, you haven't been linked to the bindings. The Component API exposes a few life-cycle hooks that you can define that will fire at certain times. You're looking for the $onInit hook.

$onInit() - Called on each controller after all the controllers on an element have been constructed and had their bindings initialized (and before the pre & post linking functions for the directives on this element). This is a good place to put initialization code for your controller.

per docs - https://docs.angularjs.org/guide/component

jusopi
  • 6,791
  • 2
  • 33
  • 44
  • 1
    I think you are right, `$onInit` should be used. This works for me: ` var vm = this; vm.$onInit = function() { console.log('loaded on init'); console.log('vm', vm.YOUR_BINDING); console.log('def yes?', angular.isDefined(vm.YOUR_BINDINGj)); }; ` – escapedcat Jan 11 '17 at 08:49
  • 6
    In some scenarios your bindings can be updated later and its values are not ready when the hook `$onInit` is call. In such cases you should use `$onChanges` and skip the first changes. Working example: https://jsfiddle.net/auxcoder/4hq5gaq0/ – aUXcoder Aug 30 '17 at 02:23
  • 3
    @aUXcoder That was my issue. I tried to create the component before the data to bind to component was ready. Putting an `ng-if` directive to ensure I had the data before the component was initialized (eg ``) fixed the issue. – Xchai Oct 20 '17 at 20:41
  • "... after all the controllers on an element have been constructed", does this mean that one component can have multiple controllers with a single use of component tag? Is there an example? – Buksy Dec 01 '17 at 07:33
  • @Buksy I think they mean that for a given HTML element, that may or may not correspond to a component, there can be more than one directive on it. For instance `>`. In this case, you have a single element, with a component controller, an ngModelController and some other directive that could have a controller. – jusopi Dec 01 '17 at 16:35
36

Make sure you use hyphens for bindings in HTML and camelCase for bindings in Javascript.

app.component("test", {
  bindings: {
    "myContactId": "<"
  }
}

<test my-contact-id="8"></test>

That's what I always forget to do.

kolobok
  • 3,835
  • 3
  • 38
  • 54
  • 1
    For reference, and a few special cases where this could bite at you: https://docs.angularjs.org/guide/directive#normalization – jfroy Jun 13 '18 at 14:43
7

The keyword this doesn't seem to works with arrow function, this works with 

controller: function() {
   alert('contact id from controller: ' + this.contactId);
}

When using arrow function, this, seems to refer to the window object because

An arrow function does not create it's own this context, rather it captures the this value of the enclosing context

Olivier Boissé
  • 15,834
  • 6
  • 38
  • 56
7

The value for contactId is available on the $scope in your controller:

var app = angular.module("test", []);
app.component("test", {
  bindings: {
    "contactId": "<"
  },
  controllerAs: "model",
  controller: ($scope) => {
    var model = $scope.model;
    alert(`contact id from controller: ${model.contactId}`);
  },
  template: "<div>Contact id from view: {{model.contactId}}</div>"
});

Link to another version of your Plunker here.

User 1058612
  • 3,739
  • 1
  • 27
  • 33
  • 1
    why can't we use this keyword when we use the arrow function style ? – Olivier Boissé Jul 26 '16 at 14:09
  • You can use `this` with the arrow function style, but I think in this situation, `this.contactId` is not available yet, for reasons that @jusopi mentioned. If you had API methods, such as someController.prototype.someMethod, `this` should have what you expect. As @jusopi mentioned, the execution order won't populate `this` in the constructor (non-prototype) as expected. – User 1058612 Jul 26 '16 at 14:26
  • 1
    I tried with a timeout and it doesn't work. As I said above, An arrow function does not create it's own this context, rather it captures the this value of the enclosing context. So with arrow function this refers to the window object, not the controller. – Olivier Boissé Jul 26 '16 at 14:29
  • Interesting. I wasn't aware of that - thanks! In this situation, regardless of function syntax, `$scope` injection will solve the problem the the OP asked. – User 1058612 Jul 26 '16 at 14:33
  • User 1058612 - thanks for the example, learned a lot. However, tried it exactly (hopefully) as you laid it out - not working for me. Any chance that 1.7.9 is the problem - there were changes to this version, but I'm new to this. Any help will do - thank you – Voltan Apr 06 '21 at 18:16
6

i will suggest some changes which you would really need to avoid these unusual bugs.

app.component("test", {
  bindings: {
    "myContactId": "<"
  },
  controller:function(){
   var self=this;
   this.$onInit=function(){
    // do all your initializations here.
    // create a local scope object for this component only. always update that scope with bindings. and use that in views also.

       self.myScopeObject=self.myContactId
   }
  },
   template:'<p>{{$ctrl.myScopeObject}}</p>'
 }

<test my-contact-id="8"></test>

some points :

  1. passing bindings to a component in html is always going to be kebab cased ex my-contact-id and its respective javascript variable will be cammal cased : myContactId.

  2. if you are passing the value insted of the object use '@' in bindings. if you are using an object and passing the object to bindigs use '<. if you want 2-way-binding to that object use '=' in the bindings config

 bindings:{
      value:'@',
      object:'<', // also known as one-way
      twoWay:'='
    }
hannad rehman
  • 4,133
  • 3
  • 33
  • 55
3

Its maybe its not the best practice, but you have a easyer access to those values:

$scope.$ctrl.contactId

You can get all the bindings in the property $ctrl inside the $scope.

I hope its help

BratisLatas
  • 527
  • 4
  • 8
2

There are two problems with the code causing the "undefined" error.

  1. As stated above the $onInit lifecycle hook should first be reached, the onInit is fired when all bindings have been made.

From the official documentation:AngularJs Documentation

$onInit() - Called on each controller after all the controllers on an element have been constructed and had their bindings initialized (and before the pre & post linking functions for the directives on this element). This is a good place to put initialization code for your controller.

  1. The second problem you will likely have, is that your controller will not reach the lifecyclehook when using "() =>" arrow notation as a parameter for the controller function.

The problem being is that arrow notation won't have it's own scope, but rather use it's enclosing scope. Meaning that when using "this" will refer to the window object rather than the component. So calling this.$onInit() will be called on the window, and will not be fired, because it doesn't exist on the window.

Sotem
  • 79
  • 7
0

For those using Directives, where Components are assumed, if bindings{} is specified it appears adding those same parameters to scope{} works:

/*bindings: {
    modalInstance: '<',
    resolve: '<'
},*/
scope: {
    modalInstance: '<',
    resolve: '<'
},

*Discovered after I wrote the above that an additional scope parameter, foo, wasn't available on $scope until I assigned it from $scope.resolve. So I had to do this in $scope.init(): $scope.foo = $scope.resolve.foo. Not sure why. Guessing it has to do with my UI Bootstrap Modal + Directives usage

This may be obvious for others but wasn't for me being relatively new to AnguluarJS.

My problem was using Directives with UI-Bootstrap Modals which are compatible with Directives but designed and documented for use with Components.

Shovas
  • 215
  • 1
  • 9
0

I am going to add another answer as a follow up to @jusopi and the accepted answer, just for those who may encounter my issue. In regards to the component, even after the $onInit hook, my data was still null, as the value from the server was still not received. To counteract this (though there may be a better way to handle this situation), I also leveraged the $onChanges hook. $onChanges will return the data that has changed when it is passed it, and you can parse that information, or simply call the binding as this.contactId and it will be updated.

More details are provided in the documentation: https://docs.angularjs.org/guide/component

CoolestNerdIII
  • 770
  • 4
  • 10