AngularJS - 来自 Json 数据的动态默认嵌套视图未出现 [英] AngularJS - Dynamic Default nested views from Json Data not appearing
问题描述
1.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></html>2.App.js:
'use strict';var $stateProviderRef = null;var $urlRouterProviderRef = null;var app = angular.module('app', ['ui.router']);app.factory('menuItems', function ($http) {返回 {全部:函数(){返回 $http({url: '/_temp/app/jsonData/statesJson.js',方法:'获取'});}};});app.config(function($locationProvider, $urlRouterProvider, $stateProvider) {$urlRouterProviderRef = $urlRouterProvider;$stateProviderRef = $stateProvider;$locationProvider.html5Mode(false);$urlRouterProviderRef.otherwise("/");});app.run(['$q', '$rootScope', '$state', 'menuItems',功能($q，$rootScope，$state'，menuItems){menuItems.all().success(function (data) {angular.forEach(数据，函数(值，键){$stateProviderRef.state(value.name, value);});**$state.go("home");<--- 解决方案**});}]);3.数据:
<预><代码>[{"name": "root","url": "/",父母":"，抽象":真实，意见":{"header": { "template": "header.html" },页脚":{模板":footer.html"}}},{"name": "家","url": "/home",父母":根"，意见":{容器@":{模板":主页"}}}]问题:
嵌套视图应该在加载时显示而不是点击事件.我尝试使用 $urlRouterProviderRef.otherwise("/") 无济于事.
要让 3 个嵌套视图在加载时显示而不是单击事件，我必须更正什么.
谢谢.
更新:
我做了一个 Plunker 来帮助显示问题PLUNKER LINK
<小时>拉迪姆·科勒
甜！！如果有人想查看想法，我更新了我的 plunker 以反映多个状态.
这里的问题是:时机.$urlRouterProviderRef.otherwise("/") 指令使用/执行过快，在 $http.get() 返回状态定义之前，即在定义状态之前在 foreach 中:$stateProviderRef.state(value.name, value);
如果这在 otherwise 触发器之前，它会起作用(正如您在使用局部变量时所经历的那样，它很快就可用).
但我们可以使用另一个功能:$state.go (较旧的文档链接，但比 新)
所以，有了这个动态"状态定义和 $state.go ......我们可以实现所需的
app.run(['$q', '$rootScope', '$state', 'menuItems',功能($q，$rootScope，$state，menuItems){菜单项.全部().成功(功能(数据){angular.forEach(数据，函数(值，键){$stateProviderRef.state(value.name, value);});$state.go("home")});}]);参见plunker.
注意:上面的 const "home" 可能只是传递的 JSON 定义的另一个部分......例如而不是 [] 使用带有 default : "home" 和 states : [...] 的对象.因为无论如何都不要发送数组.请参阅微妙的剖析JSON 漏洞，引用:
一种常见的缓解措施是确保您的 JSON 服务始终将其响应作为非数组 JSON 对象返回.
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. Data:
[
{
"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" }
}
}
]
PROBLEM:
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.
What must I correct to have the 3 nested views appear on load not a click event.
Thanks.
UPDATE:
I made a Plunker to help show the problem PLUNKER LINK
Radim Köhler
Sweet!! I updated my plunker to reflect multiple states if anyone wants to see for ideas.
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);
If this would preceed the otherwise trigger, it would work (as you experienced for example with local variable, which is available soon enough).
But we can use another feature: $state.go (older doc link, but like it more than new)
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")
});
}]);
See working plunker.
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:
One common mitigation is to make sure that your JSON service always returns its response as a non-array JSON object.
这篇关于AngularJS - 来自 Json 数据的动态默认嵌套视图未出现的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
