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中的指令內部指令？

回答

相關問題