ui-router 不渲染视图 [英] ui-router not rendering views
问题描述
我最近拆分了我拥有的一个 rails 应用程序,并使用 yeoman 将前端创建为一个单独的应用程序.出于某种原因,我的视图不再呈现,例如我的应用定义:
I recently split out a rails app I had and created the front end as a separate app with yeoman. For some reason my views no longer render, for example my app defines:
'use strict';
var actionTrackApp = angular.module('actionTrackApp', [ 'ui.router', 'ngGrid']);
actionTrackApp.config(function($locationProvider) {
return $locationProvider.html5Mode(true);
});
actionTrackApp.config(function($stateProvider){
$stateProvider
.state("packageIndex", {
url: "/packages",
views: {
"main": {
controller: "ApplicationCtrl",
template: "<h1>Test</h1>"
},
"": {
template: "<h1>Test2</h1>"
}
},
resolve: {
test: function(){
console.log("test")
}
}
})
});
在我的 index.html 文件中:
and in my index.html file I have:
bodytag ng-app="actionTrackApp" ng-controller="ApplicationCtrl">
your site or application content here<a href='/packages'>Package Index</a>
<div ng-view="main" class="container"></div>
<div ng-view=""></div>
/bodytag
当我单击链接时,resolve 属性会解析,并且我在控制台中看到test".我尝试在应用程序控制器上附加 $routeChangeStart/success 手表,但这里没有启动/成功.
When i click the link the resolve property does resolve and I see "test" in the console. I tried attaching $routeChangeStart/success watches on applicaiton controller but neither start/success fire here.
推荐答案
我看了你的代码,发现了几个问题
I took a look at your code and found a couple issues
- 要引用 ui-router 视图,您必须使用指令
ui-view
,而不是ng-view
- "" 视图定义不正确 - 您必须使用有效的键名,我将其更改为
a
并更新了 html 中的引用
- to reference ui-router views, you must use the directive
ui-view
, notng-view
- the "" view is incorrectly defined - you must use a valid key name, I changed it to
a
and updated the reference in the html
在我进行这些更改后,这里的所有工作都按预期进行:http://plnkr.co/edit/lxAUGMqajwI461VKz8xo
After I made these changes, all works as expected here: http://plnkr.co/edit/lxAUGMqajwI461VKz8xo
ps:我继续在你的链接上使用 ui-sref
而不是硬编码/package url...
ps: I went ahead and used ui-sref
on your link instead of hard-coding the /package url...
这篇关于ui-router 不渲染视图的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!