Directive inside directive in AngularJS?

Question

I'm trying to create a Directive that contains another directive (defined in the AngularJS UI), and it doesn't seem to work.

Here's my html:

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

And the directive:

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

I've copied such directive from a working one, and as soon as I delete code and leave only the div class="col-md-12", then it works. Otherwise, Angular crashes.

What am I missing?

EDIT: I've added a Plunker. The problematic directive is in line 34-42 in script.js), otherwise everything works fine.

EDIT 2: This is the console Error:

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

I think your template should have a single root element. Wrap the complete template inside a div. And see the browser console for errors. — Chandermani
– Chandermani, Commented Mar 1, 2014 at 16:18
What does the error in the console say? Probably is complaining about not having a root element. — Matt Greer
– Matt Greer, Commented Mar 1, 2014 at 16:19

bmceldowney · Accepted Answer · 2014-03-01 16:32:29Z

2

From your plunker:

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

edited Mar 1, 2014 at 16:32

answered Mar 1, 2014 at 16:27

bmceldowney

2,31514 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Eric Mitjans · Accepted Answer · 2014-03-01 16:31:11Z

1

As both Chandermani and Matt pointed out, the issue was the template not having a root element. An extra div fixed it. Thanks guys!!

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


})

answered Mar 1, 2014 at 16:31

Eric Mitjans

2,1796 gold badges41 silver badges76 bronze badges

1 Comment

curlyreggie Over a year ago

This Didn't work for me. My template is the same as your solution.

Collectives™ on Stack Overflow

Directive inside directive in AngularJS?

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related