AngularJS中的指令内部指令？

我想创建一个指令，其中包含另一个指令（在AngularJS UI中定义），它似乎不工作。AngularJS中的指令内部指令？

这里是我的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类=“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

来源

2014-03-01 Eric Mitjans

你能创建一个plunkr吗？ – Alp

我认为你的模板应该有一个单一的根元素。将完整的模板包裹在'div'中。并查看浏览器控制台是否有错误。 – Chandermani

控制台中的错误说了什么？可能是抱怨没有根元素。 –

从你plunker：

Error: [$compile:tplrt] Template for directive 'myRating' must have exactly one root element.

来源

2014-03-01 16:27:19 bmceldowney

由于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: '@' 
    } 
}; 


})

来源

2014-03-01 16:31:11

这不适合我。我的模板与您的解决方案相同。 – curlyreggie

AngularJS中的指令内部指令？

回答

相关问题