angularjs1 Failed to load ng-template的代码片段

  • 完整代码:
<!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
阅读 3.9k
1 个回答

把你的ng-app指令放在html标签上,因为你放在了body标签上了,但是你定义的模板在body标签之外,angularjs没办法去找到它并解析

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进