AngularJS의 지시어 내부 지시문?

Question

다른 지시어 (AngularJS UI에서 정의 됨)가 포함 된 지시문을 만들려고하는데 작동하지 않는 것 같습니다. 최대한 빨리 코드를 삭제 만 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" ng-show="continent == '2'"> 
     <my-rating></my-rating> 
</div> 

그리고 지침 : 여기

내 HTML의 = "col-md-12"이면 작동합니다. 그렇지 않으면 각도가 충돌합니다.

무엇이 누락 되었습니까?

수정 : Plunker을 추가했습니다. 문제가있는 지시문은 script.js의 34-42 행에 있습니다) 그렇지 않으면 모든 것이 잘 작동합니다.

편집 2가 : 당신의 plunker에서

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

:이 콘솔 오류입니다 Chandermani와 매트 모두 지적

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

Answer 2

, 문제는 템플릿이 필요하지 않은 루트 요소. 여분의 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: '@' 
    } 
}; 


})