AngularJS: Calling custom directives from within a custom directive doesn't seem to work
Question
I have a plunker here that demostrates it .
I can create two directives. In this case one is named zMonthSelect, and the other is named zTest that references zMonthSelect. Angular doesn't seem to like if they're nested. Why is that? What can I do to fix it?
Here's the code:
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
});
app.directive('zMonthSelect', function () {
return {
restrict: 'E',
priority: 1000,
scope: {
month: '=month'
},
template: '<select ng-model="month">' +
'<option value="1">Jan</option>' +
'<option value="2">Feb</option>' +
'<option value="3">Mar</option>' +
'<option value="4">Apr</option>' +
'<option value="5">May</option>' +
'<option value="6">Jun</option>' +
'<option value="7">Jul</option>' +
'<option value="8">Aug</option>' +
'<option value="9">Sep</option>' +
'<option value="10">Oct</option>' +
'<option value="11">Nov</option>' +
'<option value="12">Dec</option>' +
'</select>',
controller: function($scope) {
}
};
});
app.directive('zTest', function(){
return {
restrict: 'E',
priority: 1,
scope: {},
template: 'Test: <z-month-list month="1"></z-month-list>',
controller: function($scope) {
}
};
});
and the HTML:
<body ng-controller="MainCtrl">
zTest: <z-test></z-test><br/>
zMonthSelect: <z-month-select></z-month-select><br/>
</body>
1 answers
solution1
5 ACCPTED 2012-10-10 04:04:34
You have a mismatch in your directive name. In the zTest directive you're trying to use <z-month-list> , but your directive is named zMonthSelect . Just change your zTest directive to us <z-month-select> . See http://plnkr.co/edit/x2i8lv?p=preview
Or you can rename your inner directive to zMonthList . See http://plnkr.co/edit/aQlSqK?p=preview
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.