Question

创建了一个非常简单的Angular ui-router文件进行测试，我发现＆＃34; templateUrl＆＃34; （＆＃39;我的示例代码中的联系人状态）stateProvider不使用Chrome和IE浏览器，但适用于Firefox，但模板＆＃39;（＆＃39; home＆＃39; state在我的示例代码中）属性适用于Chrome / IE / Firefox。

我的测试项目只在同一文件夹下包含两个html文件：

的index.html

<html>
<head>
    <script src="http://unpkg.com/angular@1.5/angular.js"></script>
    <script src="http://unpkg.com/angular-ui-router@1.0.0-beta.3/release/angular-ui-router.js"></script>
</head>

<body ng-app="main-app">
    <a ui-sref="home">Home</a>
    <a ui-sref="contact">Contact</a>
  </br>
    <ui-view></ui-view>
</body>
<script>
    var myApp = angular.module('main-app', ['ui.router']);
    myApp.config(function($stateProvider) {
        var homeState = {
            name: 'home',
            url: '/home',
            template: 'hello world!'
        }
        var aboutState = {
            name: 'contact',
            url: '/contact',
            templateUrl: 'contact.html'
        }
        $stateProvider.state(homeState);
        $stateProvider.state(aboutState);
    });
</script>

</html>

contact.html

Phone: 416-1113333

Answer 1

您的示例没有任何问题，似乎您尝试通过file://协议提供应用，但Chrome等浏览器在使用file://协议时不允许XHR呼叫。

Here is 相同的示例可通过HTTP服务器访问，该服务器在浏览器中的工作方式相同。

另一种选择是：

使用index.html指令在您的<script>文件中嵌入模板： http://docs.angularjs.org/api/ng.directive:script所以你的模板与主HTML文件一起下载，不再需要通过XHR加载它们
更改浏览器设置以允许file://上的XHR呼叫协议。例如，对于Chrome，请按this answer获取更多详细信息

Angular-ui-router templateUrl不能与Chrome和IE一起使用，但适用于Firefox

1 个答案: