AngularJS中的指令内部指令

Question

我正在尝试创建一个包含另一个指令（在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"，它就可以工作了。否则，角度崩溃。

我错过了什么？

编辑：我添加了一个Plunker。有问题的指令在脚本中的第 34-42 行.js），否则一切正常。

编辑 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

Answer 1

从你的 plunker：

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

Answer 2

正如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: '@'
    }
};

})