2017-07-29 94 views
2

我重新浏览了AngularJS一段很长的时间。高兴地看到他们已经开始使用组件。我正在尝试在我的项目中使用组件。将对象从父UI状态传递到UI-Router

我有几个子组件状态需要访问父组件状态。基本上,一个对象将在所有的孩子状态中共享。我无法通过组件实现。

general overview of architecture

这里的结构是怎样的样子 -

{ 
    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一起工作?

回答

2

没关系,

解决它我自己。我不得不在ui-view指令父组件的状态添加$ctrl ..工作到很晚的

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

缺点。有时您的生产力不够。

相关问题