Javascript AngularJS指令templateUrl未加载到视图中

因此，我使用ui视图将我路由到一个分部

//route.provider.js

(function() {
'use strict';

angular
    .module('app')
    .provider('RouteService', RouteService);

RouteService.$inject = ['$stateProvider', '$urlRouterProvider'];
function RouteService ($stateProvider, $urlRouterProvider) {
    var service = {};

    this.$get = function() { return service; };

    this.initialize = function() {
        $urlRouterProvider.otherwise('/login');

        $stateProvider
            .state('home', {
                url: '/home',
                controller: 'HomeController',
                templateUrl: 'home/home.view.html',
                controllerAs: 'viewModel'
            })
            .state('login', {
                url: '/login',
                controller: 'LoginController',
                templateUrl: 'login/login.view.html',
                controllerAs: 'viewModel'
            })

            //TODO Impliment the following partial pages...

            .state('gensim', {
                url: '/gensim',
                templateUrl: 'general-simulation/simulation.view.html',
                controller: 'TabsController',
                controllerAs: 'tabs'
            })
            <...more routes...>
    }
}
})();

我希望它使用一个自定义指令在页面中插入更多html。 在simulation.view.html中，我有这个

<div class="container">
   <div class="row center">
        <div class="col-xs-12">
            <h1>General Simulation</h1>
            <gs-tabs><h1>TEST!!!!</h1></gs-tabs>
        </div>
    </div>
</div>

最后，我的tabs.view.html如下所示

<h1>YOU HAVE ENTERED TABS PARTIAL</h1>

您已输入部分选项卡

当我导航到显示simulation.view的页面时，我所能看到的是：

一般模拟

测试

那么我做错了什么呢。我检查了camelcasting，页面没有显示错误。任何帮助都将不胜感激

更新：

我在chrome的开发工具中查看了网络调用。 正在加载simulation.view.html，但tabs.view.html未加载

请求URL: 请求方法：获取 状态代码：200 OK 远程地址：10.19.8.96:80

文件子结构是：

/通用模拟/tabs/tabs.controller.js
/一般模拟/tabs/tabs.directives.js
/常规模拟/tabs/tabs.view.html /通用模拟/simulation.view.html

苏的评论帮了大忙。这使得chrome开发者开始抛出错误

提到我的文件结构也很正确。我需要更改指令，使其看起来像这样：

templateUrl: 'general-simulation/tabs/tabs.view.html'

谢谢大家!

苏的评论帮了大忙。这使得chrome开发者开始抛出错误

提到我的文件结构也很正确。我需要更改指令，使其看起来像这样：

templateUrl: 'general-simulation/tabs/tabs.view.html'

---

谢谢大家!

将评论作为答案

---

将注释作为答案，将

templateURL

更改为

templateURL

---

将

templateURL

更改为

templateURL

您在这里输入了一个错误<代码>模板URL非

模板URL

function gsTabs () {
    return {
        restrict: "E",
        templateURL: 'tabs.view.html' // change this to templateUrl
    };
}

---

你这里有个打字错误<代码>模板URL非

模板URL

function gsTabs () {
    return {
        restrict: "E",
        templateURL: 'tabs.view.html' // change this to templateUrl
    };
}

---

检查浏览器开发工具中发出的xhr请求，查看请求是否正确，以及请求的状态和响应正文。似乎很奇怪，所有其他模板都在目录中，但是

tabs

不能使用

ng include

代替您的“gsTabs”指令，正如@charlietfl所说，检查模板的路径将

templateURL

更改为

templateURL

检查在浏览器开发工具中发出的xhr请求，查看请求是否正确，以及请求的状态和响应正文。似乎很奇怪，所有其他模板都在目录中，但是

tabs

不能使用

ng include

而不是您的“gsTabs”指令，正如@charlietfl所说，检查您的模板路径将

templateURL

更改为

templateURL

谢谢，在我尝试使用以下工具访问视图之前，它就对我起了作用：

templateUrl:'./dashboard.component.html'

，但在我添加父文件夹时它起了作用：

templateUrl:'app/dashboard.component.html'

。我在文档中使用了角度布线教程。你知道为什么它不能与简单的“/name.of.file.html”引用一起使用吗？谢谢，在我尝试使用“

templateUrl:”./dashboard.component.html”

访问我的视图之前，它就对我起作用了，但是当我添加父文件夹时它起作用了：

templateUrl:'app/dashboard.component.html'

。我在文档中使用了角度布线教程。你知道为什么一个简单的“/name.of.file.html”引用不起作用吗？我有时候是个变态的白痴。谢谢你，巴德。我有时候是个变态的白痴。谢谢你，巴德。