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
See Question&Answers more detail:os