问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

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

头像
梁同学de自言自语
    448157587
    • 完整代码：
    <!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
    angularjs
    阅读 3.9k
    1 个回答
    得票最新
    头像
    weiwei
      9991111
      ✓ 已被采纳

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

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