在 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

没关系，

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

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

工作到很晚的缺点。有时您的工作效率不够高。

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

Passing object to all components from parent state in UI-Router

angularjs

angular-ui-router

angularjs-components