Question

我试图将默认数据注入ui-view模板。

$stateProvider.state('foo', {
  template: '<div ui-view=bar></div>',
  abstract: true,
  views: {
    bar: {
      template: 'test'
    }
  }
});

$stateProvider.state('foo.whiz', {
  // ...
});

这个例子不起作用，但我希望它足以告诉你我的意思。所以我基本上想要做的是，当我进入状态为foo.whiz且父亲为foo时，我希望foo注入默认数据进入bar ui-view。目前，您似乎只能通过子状态（bar@foo）填充命名视图？基本上，我如何通过路径对象初始化数据？

Answer 1

我想说，有4种方式（可能更多）如何将一些东西从孩子传递给父母。有a working plunker。

让我们在index.html中拥有这些锚点/目标：

<div ui-view="title"></div>
<div ui-view="scopeInheritance"></div>
<div ui-view="factory"></div>
<div ui-view="content"></div>

这将是父母国家'foo'

的共同def

.state('foo', {
    url: '/foo',
    views: {
      'title' : { template: '<h3>foo - parent state title</h3>',},
      'scopeInheritance' : 
      { 
        template: '<h3 ui-view="inheritance">{{parentModel.greeting}}</h3>',
        controller: 'parentCtrl',
      },
      'factory' : { template: '<h3>{{dataHolder.message}}</h3>',},
      'content' : {
        template: '<div >Content of foo (parent) <ui-view /></div>',
      },
    },
  })

<强>予。子视图完全替换父视图

在这种情况下，我们将在子状态中为视图'title'定义不同的内容：

.state('foo.whiz', {
    views: {
      'title@' : { 
        template: '<h3>{{resolved}} - child state title</h3>',
        controller : 'titleCtrl',
        resolve : { resolvedData : function() { return "whiz"; }, },
      },
    ...

因此，我们使用Absolute Names'title @'将我们的视图放入根模板。

<强> II。范围继承，子可以填充父母$scope.parentModel参考

的属性

.state('foo.whiz', {
    views: {
      'inheritance' :  
      { 
        controller: 'childCtrl',
      },
      ...

我们在父$ scope中声明了一些模型，由于Scope Inheritance by View Hierarchy Only，我们可以更改子项中的这些值：

// parent declares model
.controller('parentCtrl', function($scope){
  $scope.parentModel = { greeting : "Parent greets"};
  ...

// child changes value and does clean up
.controller('childCtrl', function($scope){
  var remember = $scope.parentModel.greeting;
  $scope.parentModel.greeting = "Child greets"
  $scope.$on("$destroy", function (){$scope.parentModel.greeting = remember;});
  ...

<强> III。工厂作为数据持有者

简单地让我们在角度世界服务/工厂中注入一些单身作为数据持有者$rootScope

// singleton
.factory('dataHolder', function(){
  return {};
});

// available everywhere
app.run(
  ['$rootScope', 'dataHolder',
    function($rootScope, dataHolder) {
      $rootScope.dataHolder = dataHolder;
    ...

// child can assign these, while parent will render them
.controller('childCtrl', function($scope){
    $scope.dataHolder.message = "Child sent message"

检查所有here

<强> IV。子视图嵌套在父级中：

最典型的UI-Router

// the anchor is inside of the parents view
.state('foo', {
    views: {
      'content' : {                              // the anchor for child
        template: '<div >Content of foo (parent) <ui-view /></div>',
      },
  ...

// child inject directily into parent

.state('foo.whiz', {
    views: {
      '' : {
        template: '<h4>Content of whiz (Child)</h4>',
      },
    ...

这些是使用UI-Router 传递数据/视图/消息的基本方法（完全跳过角度事件系统）

修改UI路由器模板的视图

1 个答案: