Question

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（“/”）无济于事。

如果在加载时出现3个嵌套视图而不是单击事件，我必须更正。

感谢。

更新

我制作了一个Plunker来帮助显示问题PLUNKER LINK

RadimKöhler

甜!!我更新了我的plunker以反映多个状态，如果有人想要查看想法。

Answer 1

这里的问题是：时机。在$urlRouterProviderRef.otherwise("/")返回状态定义之前，即在foreach中定义状态之前，$http.get()指令过早使用/执行：$stateProviderRef.state(value.name, value);

如果这将在otherwise触发器之前，那么它将起作用（例如你所经历的局部变量，很快就可以使用）。

但我们可以使用其他功能：$state.go （较旧的文档链接，但不仅仅是new）

所以，通过这个“动态”状态定义和$ state.go ...我们可以实现所需的

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")
      });
  }]);

见工作plunker。

注意：上面的const“home”可能只是传递的JSON定义的一部分......例如而不是[]使用default : "home"和states : [...]的对象。因为不管怎样都不发送数组。请参阅 Anatomy of a Subtle JSON Vulnerability ，引用：

一个常见的缓解措施是确保您的JSON服务始终将其响应作为非数组JSON对象返回。

AngularJS - Json Data中的动态默认嵌套视图未显示

1 个答案: