角ui路由器:保持相同的ui视图为孩子

I need child state be able to use parent state's resolve functions. But I also need to keep same ui-view for both states. Here's a fiddle. And there's a code

我需要子状态能够使用父状态的解析函数。但我也需要对这两个州保持相同的ui视图。这是一个小提琴。有代码

    $stateProvider
        .state('parent', {
            url: "/",
            template: '<p>Hello {{parent.one}}</p><br>'
                    + '<button ng-click="goToChild()">child</button><br>',
            // this one below work but I don't need it
            // template: '<p>Hello {{parent.one}}</p><br>'
            //      + '<button ng-click="goToChild()">child</button><br>'
            //      + '<div ui-view></div>',
            resolve: {
                test: function() {
                    return 1;
                }
            },
            controller: function($scope, $state, test) {
                $scope.parent = { one: test };
                $scope.goToChild = function() {
                    $state.go('parent.child');
                }
            }
        })
        .state('parent.child', {
            url: "/child",
            template: '<p>Hello {{child.one}}</p>',
            controller: function($scope, test) {
                $scope.child = { one: test };
            }
        })
    $urlRouterProvider.otherwise('/');

1 个解决方案

#1

There is a working plunker.

有一个工作的活塞。

The answer should be hidden/revealed in this two states definition:

答案应该隐藏/揭示在这两种状态的定义中:

parent with multi views

  .state('parent', {
    url: "/",
    views: {
      '@': {
        template: '<div ui-view=""></div>',
        controller: function($scope, $state, test) {
          $scope.parent = { one: test };
          $scope.goToChild = function() {
            $state.go('parent.child');
          }
        }
      },
      '@parent': {
        template: '<p>Parent says: hello <pre>{{parent | json}}</pre></p>'
                + '<br><button ng-click="goToChild()">child</button><br>',
      }
    },
    resolve: {
       test: function() { return 1; },
    },
  })

Child consuming parent resolve, and having its own

  .state('parent.child', {
    url: "^/child/:id",
    template: '<p>Child says: hello <pre>{{child | json }}</pre></p>',
    resolve: {
      testChild: function() { return 2; },
    },
    controller: function($scope, test, testChild) {
      $scope.child = {
        one: test,
        two : testChild,
        parent: $scope.parent,
      };
    },
  })

Check it here

检查在这里

And how it works? Well, it all is based on the:

和它是如何工作的?这一切都基于:

Scope Inheritance by View Hierarchy Only

Keep in mind that scope properties only inherit down the state chain if the views of your states are nested. Inheritance of scope properties has nothing to do with the nesting of your states and everything to do with the nesting of your views (templates).

请记住，如果状态的视图是嵌套的，那么作用域属性只继承状态链。范围属性的继承与状态的嵌套无关，而与视图(模板)的嵌套有关。

It is entirely possible that you have nested states whose templates populate ui-views at various non-nested locations within your site. In this scenario you cannot expect to access the scope variables of parent state views within the views of children states.

完全有可能有嵌套的状态，它们的模板在站点内的各种非嵌套位置上填充ui视图。在这个场景中，您不能期望访问子状态视图中的父状态视图的范围变量。

and also:

还有:

View Names - Relative vs. Absolute Names

Behind the scenes, every view gets assigned an absolute name that follows a scheme of viewname@statename, where viewname is the name used in the view directive and state name is the state's absolute name, e.g. contact.item. You can also choose to write your view names in the absolute syntax.

在幕后，每个视图都被分配一个绝对的名称，它遵循viewname@statename的一个方案，其中viewname是视图指令中使用的名称，状态名是state的绝对名称，例如contact.item。您还可以选择在绝对语法中编写视图名称。

For example, the previous example could also be written as:

例如，前面的例子也可以写成:

  .state('report',{
    views: {
      'filters@': { },
      'tabledata@': { },
      'graph@': { }
    }
  })

So, the above documentation cites are the core of the plunker. The parent uses multi views, one of them is unnamed - and will be used for inheritance. Parent also injects into that view its own "parent" view. The Resolve of a parent is in place...

因此，上面的文档引用是柱塞的核心。父视图使用多视图，其中一个未命名——将用于继承。Parent还注入到该视图的“父”视图中。父母的决心已经到位……

Child now injects into anchor of its parent, which does have all the stuff needed. That means, that child does inherit scope and also resolve stuff. It shows its own resolve as well...

子对象现在注入到父对象的锚点中，父对象确实拥有所有需要的东西。这意味着，该子节点继承范围并解析内容。它也显示了自己的决心……