AngularJS指令templateUrl无法加载到视图中

所以我使用ui-view来将我路由到部分。AngularJS指令templateUrl无法加载到视图中

//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不是。

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

文件子是：

/通用模拟/标签/ tabs.controller.js
/general-simulation/tabs/tabs.directives.js
/general-simulation/tabs/tabs.view.html /general-simulation/simulation.view.html

来源

2016-01-25 Jonathan Van Buren

检查浏览器开发工具制作XHR请求，看是否正确的请求做出和它的状态和响应主体。似乎奇怪所有其他模板都在目录中，但'tabs'不是 – charlietfl

尝试使用'ng-include'而不是'gsTabs'指令，并且@charlietfl表示，检查您的模板路径 – rkalita

将'templateURL'更改为'templateUrl' – harishr

把评论

变化。templateUrl不templateURL

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

来源

2016-01-25 13:35:27 harishr

花了4个小时，这个固定它...男人!!!!! – Baig

我有时候是个害怕白痴。感谢芽。 – OneHoopyFrood

所以entre的评论是一个很大的帮助。这让chrome dev开始吐出错误。

charlietfl在提及我的文件结构的时候，它也处于正确的轨道上。我需要改变我的指令，看起来像这样：

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

谢谢！如答案templateURL到templateUrl

来源

2016-01-25 04:03:49

谢谢，在我尝试访问我的视图之前，它对我有效：'templateUrl：'。/ dashboard.component.html''，但它在我添加父文件夹'templateUrl：'应用程序时起作用/ dashboard.component.html''。我在文档中使用了Angular路由教程。你知道为什么它不能用'./name.of.file.html'的简单引用吗？ – naz786

您在这里有一个错字

来源

2016-01-25 13:38:06 Subash

AngularJS指令templateUrl无法加载到视图中

回答

相关问题