尝试创建AngularJS指令时出现模板错误
我正在尝试创建一个指令,该指令将创建以下HTML,因此我不必在许多地方继续编写:尝试创建AngularJS指令时出现模板错误,angularjs,Angularjs,我正在尝试创建一个指令,该指令将创建以下HTML,因此我不必在许多地方继续编写: <div class="activity-mask" data-ng-show="loading!=0"> <span>Loading... {{ loading }}</span> </div> <div class="activity-mask" data-ng-show="fetching!=0">
<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>
加载。。。{{loading}}
获取。。。{{fetching}}
以下是我尝试过的:
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
};
});
app.directive('myActivity',function(){
返回{
限制:“A”,
模板:“”+
“正在加载…{{Loading}}”+
"" +
"" +
“正在获取…{{Fetching}”+
"",
替换:正确
};
});
但是,这给了我以下错误:
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
错误:[$compile:tplrt]http://errors.angularjs.org/1.2.2/$compile/tplrt?p0=myActivity和p1=
错误()
在http://127.0.0.1:81/Scripts/angular-v1.2.2/angular.min.js:6:449
在华盛顿(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)
at 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-路由器主控/发布/角度用户界面路由器.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.$broadcast(http://127.0.0.1:81/Scripts/angular-v1.2.2/angular.min.js:103:156)angular.min.js:84
(匿名函数)angular.min.js:84
$get angular.min.js:62
$get.g.$broadcast angular.min.js:103
$.transition.$.transition.I.then.$.transition.$.transition.ui-router.min.js:7
k、 答应我。然后。一个有棱角的。min.js:91
(匿名函数)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.min.js:67
w.min.js:71
H.onreadystatechange
答案在错误堆栈本身中。只需按照错误描述链接进行操作:
使用
replace:true
时,模板需要有一个根节点。你的有两个。你能试着把它放在一个模板Url中吗?如果我把它放在一个Url中,会不会不一样?我认为问题可能与参数传递到模板的方式有关,但我不确定,因为这是我的第一个指令。