在UI-Router中将对象从父状态传递给所有组件

Question

经过一段时间后我再次访问了AngularJS。很高兴看到他们已经开始使用组件。我正在尝试使用项目中的组件。

我有几个需要访问父组件状态的子组件状态。基本上，所有子状态都将共享一个对象。我无法用组件实现这一点。

以下是结构的样子 -

  {
    name: 'wizard',
    url: '/wizard',
    component: 'wizard',
    redirectTo: 'wizard.init'
  },
  {
    name: 'wizard.init',
    url: '/init',
    component: 'init'
  },
  {
    name: 'wizard.customize',
    url: '/customize',
    component: 'customize'
  },
  {
    name: 'wizard.finish',
    url: '/finish',
    component: 'finish'
  }

在向导组件中有一个名为$ctrl.settings的对象/变量，我希望在其所有子状态中共享它。

我尝试过这样的事情 -

<div ui-view settings="settings">

在像这样的子组件中访问它们 -

(function(angular){
  var app = angular.module('app');

  app.component('init', {
    templateUrl:'Scripts/dist/views/modules/wizard/init.html',
    controller: WizInit,
    bindings : {
      'settings' : '='
    }
  });

  function WizInit(){
    var $ctrl = this;

    $ctrl.$onInit = function(){
      console.log("init Start Step");
      console.log($ctrl.WizInit);
      $ctrl.WizInit= "start";
    }        
  }    
})(window.angular);

但是我在每个州都未定义，即使我已将其分配给父组件/wizard中的某个值。

如何使其与组件和ui-router一起使用？

Answer 1

没关系，

我自己解决了。我只需要在父组件状态的$ctrl指令中添加ui-view ..

<div ui-view settings="$ctrl.settings">

工作迟到的缺点。你有时候不够富有成效。