AngularJS指令templateUrl未加载到视图中

Question

So I am using ui-view to route me to a partial.

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

The issue I am having is once it routes to

// general-simulation/simulation.view.html

I'd like it to use a custom directive to insert more html into the page. Inside simulation.view.html I have this.

<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>

The directive is constructed in

// tabs.directives.js
(function(){
'use strict';

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

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

})();

Finally, my tabs.view.html looks like this.

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

When I navigate to the page that displays simulation.view all I can see is:

General Simulation

TEST!!!!

So what am I doing wrong here. I checked for camelCasing and the page is not showing in errors. Any help would be greatly appreciated!

Update:

I viewed the network calls in chrome's dev tools. simulation.view.html is being loaded but tabs.view.html isn't.

Request URL: http://sdc-stagt01/AngularJS/general-simulation/simulation.view.html Request Method:GET Status Code:200 OK Remote Address:10.19.8.96:80

The file substructure is:

/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

putting comment as answer

change templateURL to templateUrl

Answer 2

So entre 's comment was a big help. That got chrome dev to start spitting out errors.

charlietfl Was on the right track with mentioning my file structure as well. I needed to change my directive to look like this:

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

Thank you!

Answer 3

You have a typo here. templateUrl not templateURL

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