Question

所以我使用ui-view将我分道扬..

//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...>
    }
}
})();

我遇到的问题是它一旦路由到

// general-simulation/simulation.view.html

我希望使用自定义指令在页面中插入更多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.directives.js
(function(){
'use strict';

angular
    .module('app')
    .directive('gsTabs', gsTabs);

function gsTabs () {
    return {
        restrict: "E",
        templateURL: 'tabs.view.html'
    };
}

})();

最后，我的tabs.view.html看起来像这样。

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

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

常规模拟

TEST !!!!

那我在这里做错了什么。我检查了camelCasing，页面没有显示错误。任何帮助将不胜感激！

更新

我在Chrome的开发工具中查看过网络电话。正在加载simulation.view.html，但tabs.view.html不是。

请求网址：http://sdc-stagt01/AngularJS/general-simulation/simulation.view.html 请求方法：GET 状态代码：200 OK 远程地址：10.19.8.96：80

文件子结构是：

/general-simulation/tabs/tabs.controller.js
  /general-simulation/tabs/tabs.directives.js
  /general-simulation/tabs/tabs.view.html   /general-simulation/simulation.view.html

Answer 1

将评论作为答案

将templateURL更改为templateUrl

Answer 2

所以entre的评论是一个很大的帮助。这让Chrome开发人员开始吐出错误。

charlietfl在提及我的文件结构方面走在正确的轨道上。我需要改变我的指令看起来像这样：

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

谢谢！

Answer 3

你这里有一个错字。 templateUrl不是templateURL

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

AngularJS指令templateUrl未加载到视图中

3 个答案: