I am learning component pattern in angularJS. I am trying to use bindings in component pattern. The binding name I have used is firstName . But the problem is it is not binding. When I replaced firstName with anything else like abc it works fine. Can anyone say what may have caused that problem?
The component code is as follow:
(function () {
angular.module('mainModule').component('heroList', {
template: '<p>Hello from component {{$ctrl.firstName}}</p>',
//controller: 'HeroListController',
bindings: {
firstName: '='
}
})
}());The index.html and index.js that calls this component is:
(function () {
var app= angular.module('mainModule', []);
app.controller('myCtrl', function () {
var vm = this;
vm.firstName = "John";
vm.lastName = "Doe";
})
}())<!DOCTYPE html>
<html>
<head>
<title>Angular Components</title>
<script src="scripts/angular.min.js"></script>
<script src="index.js"></script>
<script src="heroes/hero-list.component.js"></script>
<script src="heroes/hero-list.controller.js"></script>
</head>
<body ng-app="mainModule" ng-controller="myCtrl as vm">
{{vm.firstName}} {{vm.lastName}}
<hero-list firstName="vm.firstName"><hero-list>
</body>
</html>The output I get is:
> John Doe
>
>Hello from component
But after I replace firstName with abc I get the desired output.
>John Doe
>
>Hello from component John
Could anyone help me with what may have caused this problem?