[英]Directive inside directive in AngularJS?
我正在尝试创建一个包含另一个指令(在AngularJS UI中定义)的指令,它似乎不起作用。
这是我的HTML:
<div class="col-md-12" ng-show="continent == '2'">
<my-rating></my-rating>
</div>
指令:
.directive('myRating', function() {
return{
restrict: 'E',
template: '<div class="row question">{{questions.3A.name}}</div> \
<div class="row rating" ng-controller="RatingDemoCtrl"> \
<rating value="rate" max="max" readonly="isReadonly" state-on="\'glyphicon-star rated\'" state-off="\'glyphicon-star\'"></rating> \
<div class="col-md-12"> \
<button class="btn btn-sm btn-danger form-control" ng-click="rate = 0" ng-disabled="isReadonly">Clear</button> \
</div> \
</div>',
replace: true,
scope: {
text: '@'
}
};
})
我已经从一个工作版中复制了这样的指令,一旦我删除代码并只留下div class =“col-md-12”,那么它就可以了。 否则,Angular会崩溃。
我错过了什么?
编辑 :我添加了一个Plunker 。 有问题的指令在script.js中的第34-42行,否则一切正常。
编辑2 :这是控制台错误:
Error: [$compile:tplrt] http://errors.angularjs.org/1.2.13/$compile/tplrt?p0=myRating&p1=
at Error (native)
at file:///C:/Users/Zuh/Desktop/ANGULARJS/js/lib/angular.min.js:6:450
at Wa (file:///C:/Users/Zuh/Desktop/ANGULARJS/js/lib/angular.min.js:51:416)
at L (file:///C:/Users/Zuh/Desktop/ANGULARJS/js/lib/angular.min.js:43:62)
at L (file:///C:/Users/Zuh/Desktop/ANGULARJS/js/lib/angular.min.js:43:184)
at L (file:///C:/Users/Zuh/Desktop/ANGULARJS/js/lib/angular.min.js:43:184)
at L (file:///C:/Users/Zuh/Desktop/ANGULARJS/js/lib/angular.min.js:43:184)
at L (file:///C:/Users/Zuh/Desktop/ANGULARJS/js/lib/angular.min.js:43:184)
at Y (file:///C:/Users/Zuh/Desktop/ANGULARJS/js/lib/angular.min.js:41:360)
at Wa (file:///C:/Users/Zuh/Desktop/ANGULARJS/js/lib/angular.min.js:51:164) angular.min.js:85
来自您的plunker:
Error: [$compile:tplrt] Template for directive 'myRating' must have exactly one root element.
正如Chandermani和Matt所指出的那样,问题是没有根元素的模板。 一个额外的div固定它。 多谢你们!!
.directive('myRating', function() {
return{
restrict: 'E',
template: '<div>\
<div class="row question">{{questions.3A.name}}</div> \
<div class="row rating" ng-controller="RatingDemoCtrl"> \
<rating value="rate" max="max" readonly="isReadonly" state-on="\'glyphicon-star rated\'" state-off="\'glyphicon-star\'"></rating> \
<div class="col-md-12"> \
<button class="btn btn-sm btn-danger form-control" ng-click="rate = 0" ng-disabled="isReadonly">Clear</button> \
</div> \
</div> \
</div>',
replace: true,
scope: {
text: '@'
}
};
})
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.