Template error when trying to create an AngularJS directive

Question

I am trying to create a directive that will create the following HTML so I do not have to keep writing this in many places:

    <div class="activity-mask" data-ng-show="loading!=0">
        <span>Loading... {{ loading }}</span>
    </div>
    <div class="activity-mask" data-ng-show="fetching!=0">
        <span>Fetching... {{ fetching }}</span>
    </div>

Here is what I tried:

 app.directive('myActivity', function() {
    return {
        restrict: "A",
        template: "<div class='activity-mask' data-ng-show='loading!=0'>" +
                   "<span>Loading... {{ loading }}</span>" + 
                   "</div>" +
                   "<div class='activity-mask' data-ng-show='fetching!=0'>" +
                   "<span>Fetching... {{ fetching }}</span>" +
                   "</div>",
        replace: true
    };
});

However this gives me the following error:

Error: [$compile:tplrt] http://errors.angularjs.org/1.2.2/$compile/tplrt?p0=myActivity&p1=
    at Error (<anonymous>)
    at http://127.0.0.1:81/Scripts/angular-v1.2.2/angular.min.js:6:449
    at wa (http://127.0.0.1:81/Scripts/angular-v1.2.2/angular.min.js:51:488)
    at R (http://127.0.0.1:81/Scripts/angular-v1.2.2/angular.min.js:43:145)
    at R (http://127.0.0.1:81/Scripts/angular-v1.2.2/angular.min.js:43:241)
    at R (http://127.0.0.1:81/Scripts/angular-v1.2.2/angular.min.js:43:241)
    at t (http://127.0.0.1:81/Scripts/angular-v1.2.2/angular.min.js:41:427)
    at h (http://127.0.0.1:81/Scripts/ui-router-master/release/angular-ui-router.min.js:7:11027)
    at l.compile.x (http://127.0.0.1:81/Scripts/ui-router-master/release/angular-ui-router.min.js:7:11814)
    at g.$get.g.$broadcast (http://127.0.0.1:81/Scripts/angular-v1.2.2/angular.min.js:103:156) angular.min.js:84
(anonymous function) angular.min.js:84
$get angular.min.js:62
$get.g.$broadcast angular.min.js:103
$.transitionTo.$.transition.I.then.$.transition.$.transition angular-ui-router.min.js:7
k.promise.then.A angular.min.js:91
(anonymous function) angular.min.js:93
$get.g.$eval angular.min.js:101
$get.g.$digest angular.min.js:98
$get.g.$apply angular.min.js:101
g angular.min.js:67
w angular.min.js:71
H.onreadystatechange

Would it not be the same if I put it in a Url ? I think the problem is maybe something to do with the way the parameters are passed to the template but I am not sure as this is my first directive. — Samantha J T Star
– Samantha J T Star, Commented Nov 28, 2013 at 6:41

Stewie · Accepted Answer · 2013-11-28 06:48:39Z

13

The answer is in the error stack itself. Just follow the error description link:

http://docs.angularjs.org/error/$compile:tplrt?p0=myActivity

When using replace: true your template needs to have one root node. Yours have two.

edited Nov 28, 2013 at 6:48

answered Nov 28, 2013 at 6:41

Stewie

60.4k20 gold badges148 silver badges113 bronze badges

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

Collectives™ on Stack Overflow

Template error when trying to create an AngularJS directive

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related