I use Angular component (first example from this). When I binding object in component, it is accessible in template, but isn't in controller.
js:
function HeroDetailController() {
console.log("Here I want to use hero.name: ");
console.log(hero.name); // I want to use binding object in controller, but doesn't work
}
angular.module('heroApp').component('heroDetail', {
templateUrl: 'heroDetail.html',
controller: HeroDetailController,
controllerAs: 'ctrl',
bindings: {
hero: '='
}
});
html:
<hero-detail hero="ctrl.hero"></hero-detail>
template html (here it works):
<span>Name: {{ctrl.hero.name}}</span>
Error:
ReferenceError: hero is not defined
Plunker: https://plnkr.co/edit/U9CJLs6jgrlsZH6tUdr0
You will get bindings
value inside HeroDetailController
context which is this
function HeroDetailController() {
var ctrl = this;
console.log("Here I want to use hero.name: ");
console.log(ctrl.hero);
}
Though above would not work. Because it would not pass initial binding to component on 1st digest cycle.
For getting the value you could use $onInit
lifecycle value on component.
function HeroDetailController() {
var ctrl = this;
console.log("Here I want to use hero.name: ");
ctrl.$onInit = function(){
console.log(ctrl.hero);
}
}
Even you could get a value directly without $onInit
. For the same you have to change $compileProvider
config like below.(it has been introduced in 1.6+)
.config(function($compileProvider){
$compileProvider.preAssignBindingsEnabled(true)
});
Note: Ideally you shouldn't enforce above setting in your application, I just gave it fore demonstration.
Demo Plunkr
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With