试图创造一个AngularJS指令时，模板错误 [英] Template error when trying to create an AngularJS directive

问题描述

我想创建一个指令，将创建下列HTML所以我没有继续在很多地方写这本：

 ＆LT;！负荷= 0的div类=活动的面具数据-NG-秀= GT;
        ＆LT;跨度＆GT;载入中... {{加载}}＆LT; / SPAN＆GT;
    ＆LT; / DIV＆GT;
    ＆LT; D​​IV CLASS =活动的面具数据-NG-秀=取！= 0＆GT;
        ＆LT;跨度＆GT;撷取中... {{}取}＆LT; / SPAN＆GT;
    ＆LT; / DIV＆GT;
 

下面是我的尝试：

  app.directive（'myActivity'，函数（）{
    返回{
        限制：A，
        模板：＆LT; D​​IV CLASS ='活动的面具数据-NG-秀='装！= 0'＆gt;中+
                   ＆LT;跨度＆GT;载入中... {{加载}}＆LT; / SPAN＆gt;中+
                   ＆LT; / DIV＆gt;中+
                   ＆LT; D​​IV CLASS ='活动的面具数据-NG-秀='取！= 0'＆gt;中+
                   ＆LT;跨度＆GT;撷取中... {{}取}＆LT; / SPAN＆gt;中+
                   ＆LT; / DIV＆gt;中，
        替换：真
    };
}）;
 

然而，这给了我以下错误：

 错误：[$编译：tplrt] http://errors.angularjs.org/1.2.2/$compile/tplrt?p0=myActivity&p1=
    在错误（小于匿名＆GT;）
    在http://127.0.0.1:81/Scripts/angular-v1.2.2/angular.min.js:6:449
    在WA（http://127.0.0.1:81/Scripts/angular-v1.2.2/angular.min.js:51:488）
    在R（http://127.0.0.1:81/Scripts/angular-v1.2.2/angular.min.js:43:145）
    在R（http://127.0.0.1:81/Scripts/angular-v1.2.2/angular.min.js:43:241）
    在R（http://127.0.0.1:81/Scripts/angular-v1.2.2/angular.min.js:43:241）
    在t（http://127.0.0.1:81/Scripts/angular-v1.2.2/angular.min.js:41:427）
    在H（http://127.0.0.1:81/Scripts/ui-router-master/release/angular-ui-router.min.js:7:11027）
    在l.compile.x（http://127.0.0.1:81/Scripts/ui-router-master/release/angular-ui-router.min.js:7:11814）
    在G $ get.g. $广播（http://127.0.0.1:81/Scripts/angular-v1.2.2/angular.min.js:103:156）angular.min.js：84
（匿名函数）angular.min.js：84
$得到angular.min.js：62
$ get.g. $广播angular.min.js：103
。。。$ .transitionTo $ transition.I.then $ $转型过渡角-UI-router.min.js：7
k.promise.then.A angular.min.js：91
（匿名函数）angular.min.js：93
$ get.g. $ EVAL angular.min.js：101
$ get.g. $消化angular.min.js：98
$ get.g. $适用angular.min.js：101
摹angular.min.js：67
W¯¯angular.min.js：71
H.onreadystatechange
 

解决方案

答案是错误堆栈本身。只要按照错误原文链接：

<一个href=\"http://docs.angularjs.org/error/%24compile%3atplrt?p0=myActivity\">http://docs.angularjs.org/error/$compile:tplrt?p0=myActivity

在使用更换：真正的您的模板需要有一个根节点。你有两个。

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

解决方案

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.

这篇关于试图创造一个AngularJS指令时，模板错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！