Question

我试图在整个文件传输协议（不在任何服务器上）上运行基于angularjs的应用程序在本地文件上。

我的项目包含html文件顶级的index.html和模板文件夹，以及模板文件夹中包含的其他子html文件，例如common.html，main.html等。

此应用会触发以下错误，
Error: [$compile:tpload] Failed to load template: template/common.html (HTTP status: 404)，
仅在通过文件传输进入时才file:///C:/Webapp/index.html#common/abc。

但是通过http输入时不会发生。

此外，此文件传输访问会在Chrome，IE中触发错误，但在Firefox中则不会。

第二个奇怪的是，仅当网址以#common/abc结尾时才会发生这种情况。 触发tpload错误的唯一一个url就像 file:///C:/Webapp/index.html#common/abc（仅在index.html之后使用#common /〜，如果最后没有'abc'，我就不会收到错误。）

'abc'的功能就像在我的应用程序上输入的参数（在我的项目中称为channelTag），而不是实际的文件。

而且这个项目打算从获取channelTag和流量的url file:///C:/Webapp/index.html#common/abc开始其他子网址。

其他网址如file:///C:/Webapp/index.html#main或file:///C:/Webapp/index.html#sub2都可以。那里没有错误。

检查完搜索后的相关答案后，大多数答案都说包括bootstrap-tpls.js而不是bootstrap.js，但是这个方法显示了相同的结果。

附件是下面的html和javascript代码：

index.html：

<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="EUC-KR">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="{{metaservice.metaViewport()}}" />
<title>BtvWebApp</title>
<link rel="stylesheet" type="text/css" href="css/btv.css">

<script src="js/lib/jquery-1.11.1.min.js"></script>
<script src="js/bxslider/jquery.bxslider.min.js"></script>
    <script src="js/lib/angular.js"></script>
    <script src="js/bootstrap/bootstrap.js"></script>

<script src="js/lib/angular-route.min.js"></script>
<script src="js/lib/angular-sanitize.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular-resource.min.js"></script>      

<script src="js/app.js"></script>
<script src="js/lib/script.js"></script>

<script src="js/view/main/mainController.js"></script>    
<script src="js/view/commonController.js"></script>                
<script src="js/filters/zerofillFilter.js"></script>    
<script src="js/config/constants.js"></script>
<script src="js/config/messages.js"></script>


</head>
<body>
    <ng-view></ng-view>
</body>
</html>

common.html是一个空的html文件。

app.js：

var app = angular.module('myApp', [
  'ngRoute',
  'ngSanitize',
  'myApp.constant',
  'myApp.messages'      
])
.config(['$routeProvider', function($routeProvider) {
  $routeProvider
      .when('/main', {
        templateUrl: 'template/main.html',
        controller: 'mainCtrl'
      })
      // Containing other sub whens...
      /////////////////////////////
      .otherwise({redirectTo: '/common/:channelTag'});
}]);

commonController.js：

'use strict';

app.config(['$routeProvider', function($routeProvider) {
    $routeProvider.when('/common/:channelTag', {
        templateUrl: 'template/common.html',
        controller: 'commonCtrl'
    });
}])
.controller('commonCtrl', ['$scope', '$location', '$http', '$rootScope', '$routeParams', 'commonConstant', 'information', 'Utils', 'MetaService'
    , function($scope, $location, $http, $rootScope, $routeParams, commonConstant, information, Utils, MetaService) {
    $scope.isDataLoading = true;

    var channelTag = $routeParams.channelTag;

    if(!Utils.isEmpty(channelTag)){
        information.channelTag = channelTag;            
    }                           
}])
.service('MetaService', function() {
   var metaViewport = '';
   return {
      set: function(newViewport) {
          metaViewport = newViewport;
      },
      metaViewport: function() { return metaViewport; }
   }
});

运行文件传输协议时有什么问题，即使我使用disable-security设置chrome选项？

为什么我只在网址以'〜＃common / abc'结尾时才收到错误？

欢迎任何建议。

Answer 1

在您的项目中包含 ui.bootstrap.tpls 将解决上述问题

Answer 2

哎呀，我自己解决了这个问题。

这是由于common.html带有空码，所以有些浏览器找不到模板内容。在该文件中添加<div>标记，未发现错误。

希望它能帮助别人......

$ compile：tpload无法加载模板（HTTP状态：404）仅在一个子URL中

2 个答案: