<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="https://cdn.bootcss.com/angular.js/1.4.7/angular.js"></script>
<script type="text/ng-template" id="tpl.html">
<div class="tip">{{message}}</div>
<button ng-transclude></button>
</script>
</head>
<body ng-app="ngApp">
<div>
<input ng-model="message" placeholder="请输入提示内容" />
<ts-message>固定</ts-message>
</div>
<script type="text/javascript">
angular.module('ngApp',[])
.directive('tsMessage',function(){
return {
restrict : 'EAC',
templateUrl : 'tpl.html',
transclude : true,
scope : true,
link : function(scope,element,attrs){
element.bind('click',function(){
scope.$apply(function(){
scope.message = '这是点击后的值';
})
})
}
}
});
</script>
</body>
</html>
GET http://127.0.0.1:8020/myDemo/ng/tpl.html 404 (Not Found)
Error: [$compile:tpload] Failed to load template: tpl.html (HTTP status: 404 Not Found)
http://errors.angularjs.org/1.4.7/$compile/tpload?p0=tpl.html&p1=404&p2=Not%20Found
at angular.js:68
at handleError (angular.js:17676)
at processQueue (angular.js:14745)
at angular.js:14761
at Scope.$eval (angular.js:15989)
at Scope.$digest (angular.js:15800)
at Scope.$apply (angular.js:16097)
at done (angular.js:10546)
at completeRequest (angular.js:10744)
at XMLHttpRequest.requestLoaded (angular.js:10685)
(anonymous) @ angular.js:12477
(anonymous) @ angular.js:9246
processQueue @ angular.js:14753
(anonymous) @ angular.js:14761
$eval @ angular.js:15989
$digest @ angular.js:15800
$apply @ angular.js:16097
done @ angular.js:10546
completeRequest @ angular.js:10744
requestLoaded @ angular.js:10685
XMLHttpRequest.send (async)
(anonymous) @ angular.js:10722
sendReq @ angular.js:10515
serverRequest @ angular.js:10222
processQueue @ angular.js:14745
(anonymous) @ angular.js:14761
$eval @ angular.js:15989
$digest @ angular.js:15800
$apply @ angular.js:16097
bootstrapApply @ angular.js:1660
invoke @ angular.js:4478
doBootstrap @ angular.js:1658
bootstrap @ angular.js:1678
angularInit @ angular.js:1572
(anonymous) @ angular.js:28899
trigger @ angular.js:3024
eventHandler @ angular.js:3298
把你的
ng-app
指令放在html标签上,因为你放在了body标签上了,但是你定义的模板在body标签之外,angularjs没办法去找到它并解析