Javascript AngularJS中的指令内部指令？

我试图创建一个包含另一个指令（在AngularJS UI中定义）的指令，但它似乎不起作用

这是我的html：

<div class="col-md-12" ng-show="continent == '2'">
       <my-rating></my-rating>
</div>

从你的宝物：

---

错误：[$compile:tplrt]指令“myRating”的模板必须只有一个根元素。

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


})

指令（'myRating'，函数（）{ 返回{ 限制：'E'， 模板：'\ {{questions.3A.name}\ \ \ \ 清楚的\ \ \ ', 替换：正确， 范围：{ 正文：“@” } }; })

---

你能创建一个plunkr吗？我认为你的模板应该有一个根元素。将完整的模板包装在

div

中。并查看浏览器控制台中的错误。控制台中的错误说明了什么？可能是在抱怨没有根元素。这对我不起作用。我的模板与您的解决方案相同。

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

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


})