问题描述
1。 HTML：
<html>
<head><title>MyApp</title></head>
<body data-ng-app="app">
<ul><li><a data-ui-sref="home" style="cursor:pointer;">Home</a></li></ul>
<div data-ui-view="header"></div>
<div data-ui-view="container"></div>
<div data-ui-view="footer"></div>
<script src="/Scripts/angular-1.2.9/angular.min.js"></script>
<script src="/Scripts/angular-1.2.9/animate/angular-animate.js"></script>
<script src="/Scripts/angular-1.2.9/ui-router/angular-ui-router.js"></script>
<script src="/Scripts/angular-1.2.9/ui-bootstrap/ui-bootstrap-custom-tpls-0.11.0.js"></script>
<script src="/_temp/app/app.js"></script>
</body>
</html>
2。 App.js：
'use strict';
var $stateProviderRef = null;
var $urlRouterProviderRef = null;
var app = angular.module('app', ['ui.router']);
app.factory('menuItems', function ($http) {
return {
all: function () {
return $http({
url: '/_temp/app/jsonData/statesJson.js',
method: 'GET'
});
}
};
});
app.config(function($locationProvider, $urlRouterProvider, $stateProvider) {
$urlRouterProviderRef = $urlRouterProvider;
$stateProviderRef = $stateProvider;
$locationProvider.html5Mode(false);
$urlRouterProviderRef.otherwise("/");
});
app.run(['$q', '$rootScope', '$state', 'menuItems',
function ($q, $rootScope, $state', menuItems) {
menuItems.all().success(function (data) {
angular.forEach(data, function (value, key) {
$stateProviderRef.state(value.name, value);
});
**$state.go("home"); <--- SOLUTION**
});
}]);
3。数据：
[
{
"name": "root",
"url": "/",
"parent": "",
"abstract": true,
"views": {
"header": { "template": "header.html" },
"footer": { "template": "footer.html" }
}
},
{
"name": "home",
"url": "/home",
"parent": "root",
"views": {
"container@": { "template": "home page" }
}
}
]
问题：
嵌套的看法猜想出现在负荷没有click事件。我试着用$ urlRouterProviderRef.otherwise（/）无济于事玩了。
The nested views were suppose to show up on load not the click event. I tried to play with the $urlRouterProviderRef.otherwise("/") to no avail.
我必须纠正有3嵌套视图出现在负载不是一个click事件。
What must I correct to have the 3 nested views appear on load not a click event.
感谢。
更新：
我做了一个Plunker帮助显示问题
I made a Plunker to help show the problem PLUNKER LINK
拉迪姆·克勒
甜！我更新了我的plunker如果任何人希望看到的想法，反映多种状态。的
Sweet!! I updated my plunker to reflect multiple states if anyone wants to see for ideas.
推荐答案
这里的问题是：时机。在 $ urlRouterProviderRef.otherwise（/）指令用于/太早执行之前， $ http.get（）返回状态定义，在的foreach被定义的状态，即前： $ stateProviderRef.state（value.name，值）;
The issue here is: timing. The $urlRouterProviderRef.otherwise("/") instruction is used/executed too soon, before the $http.get() returns the state definition, i.e. before states are defined in foreach: $stateProviderRef.state(value.name, value);
如果这将preceed的，否则触发器，它会工作的（如你有经验，例如与局部变量，这是可以很快就好了）。
If this would preceed the otherwise trigger, it would work (as you experienced for example with local variable, which is available soon enough).
但我们可以用另外一个功能：的的（DOC旧的联系，但它一样多的）的
But we can use another feature: $state.go (older doc link, but like it more than new)
所以，用这种动态的状态定义和$ state.go ...我们能达到预期的
So, with this "dynamic" state definition and $state.go ... we can achieve the desired
app.run(['$q', '$rootScope', '$state', 'menuItems',
function ($q, $rootScope, $state, menuItems) {
menuItems
.all()
.success(function (data)
{
angular.forEach(data, function (value, key) {
$stateProviderRef.state(value.name, value);
});
$state.go("home")
});
}]);
请参阅。
的注：以上常量家可能是通过JSON定义的只是一部分anohter例如...而不是[]使用带有默认的对象：家和说：[...] 。因为不继续发送数组。请参阅 ，举：的
NOTE: the above const "home" could be just anohter part of the passed JSON definition... e.g. instead of [] use an object with default : "home" and states : [...]. Because do not send array anyway. See Anatomy of a Subtle JSON Vulnerability, cite:
的一个常见的缓解措施是确保您的JSON服务总是返回它作为一个非数组JSON对象响应。的
这篇关于AngularJS - 从JSON数据没有出现动态默认嵌套意见的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！