code to create tabs component Hi,I am learning angular component from this link ,the problem is when i tried to load from external files instead of template it throws following error
angular.js:13708 TypeError: Cannot set property 'selected' of undefined
at controller.selectTab (scr.js:47)
at controller.$postLink (scr.js:50)
at angular.js:9228
at forEach (angular.js:329)
at nodeLinkFn (angular.js:9225)
at compositeLinkFn (angular.js:8510)
at compositeLinkFn (angular.js:8513)
at compositeLinkFn (angular.js:8513)
at publicLinkFn (angular.js:8390)
at angular.js:1756
here is the scr.js code
var tab = {
bindings: {
label: '@'
},
require: {
tabs: '^^tabs'
},
transclude: true,
template:['$templateCache',function($templateCache){
return $templateCache.get('tab.html')
}
],
controller: function () {
this.$onInit = function () {
this.tab = {
label: this.label,
selected: false
};
this.tabs.addTab(this.tab);
};
}
};
var tabs = {
bindings: {
selected: '@'
},
transclude: true,
template:['$templateCache',function($templateCache){
return $templateCache.get('tab.html')
}
],
controller: function () {
this.$onInit = function () {
this.tabs = [];
};
this.addTab = function addTab(tab) {
this.tabs.push(tab);
};
this.selectTab = function selectTab(index) {
for (var i = 0; i < this.tabs.length; i++) {
this.tabs[i].selected = false;
}
this.tabs[index].selected = true;
};
this.$postLink = function () {
this.selectTab(this.selected);
console.log(this.selected)
};
},
};
angular
.module('app', [])
.component('tab', tab)
.component('tabs', tabs);
Here is html code:
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.js"></script>
<script src="scr.js"></script>
<style>
* {
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
}
body {
font: 300 14px/1.4 'Helvetica Neue', Helvetica, Arial, sans-serif;
background: #111;
margin: 0;
padding: 0;
}
.tabs {
margin: 25px;
background: #fff;
}
.tabs__list {
list-style: none;
margin: 0;
padding: 0;
overflow: hidden;
border-bottom: 1px solid #eee;
}
.tabs__list li {
float: left;
}
.tabs__list li a {
color: #444;
display: block;
text-decoration: none;
padding: 10px 20px;
}
.tabs__content {
padding: 10px;
}
</style>
</head>
<body>
<div ng-app="app">
<div>
<tabs selected="2">
<tab label="Tab 1">
Tab 1 contents!
</tab>
<tab label="Tab 2">
Tab 2 contents!
</tab>
<tab label="Tab 3">
Tab 3 contents!
</tab>
</tabs>
</div>
</div>
</body>
</html>
here are two template which i am trying to load in component tab.html and tabs.html respectively:
<div class="tabs__content" ng-if="$ctrl.tab.selected">
<div ng-transclude></div>
</div>
<div class="tabs">
<ul class="tabs__list">
<li ng-repeat="tab in $ctrl.tabs">
<a href=""
ng-bind="tab.label"
ng-click="$ctrl.selectTab($index);"></a>
</li>
</ul>
<div class="tabs__content" ng-transclude></div>
</div>
can any one please help me fix this,Thanks in advance