如何将自定义数据从ui-router中的视图传递到某个状态?

时间:2015-03-24 06:53:15

标签: angularjs angular-ui-router state

我使用$stateProvider进行路由配置。我想利用他们提供的自定义数据将一些自定义数据从一个部分页面传递到另一个部分页面(在ng-click上)。

这是我到目前为止所做的最好的事情:

将自定义数据附加到状态对象

您可以将自定义数据附加到状态对象(我们建议使用数据属性以避免冲突)。

// Example shows an object-based state and a string-based state 
var contacts = { 
    name: 'contacts',
    templateUrl: 'contacts.html',
    data: {
        customData1: 5,
        customData2: "blue"
    }
} 
$stateProvider
    .state(contacts)
    .state('contacts.list', {
        templateUrl: 'contacts.list.html',
        data: {
            customData1: 44,
            customData2: "red"
        }
    }) 

通过上面的示例说明您可以访问如下数据:

function Ctrl($state){
     console.log($state.current.data.customData1) // outputs 5;
     console.log($state.current.data.customData2) // outputs "blue";
 }

Source

假设我有另一个名为customers的州,拥有自己的模板和控制器。如何在客户控制器/视图中更改联系人状态数据对象的值? 即:我想改变这一点:

data: {
            customData1: 44,
            customData2: "red"
        } 

到此:

data: {
            customData1: 100,
            customData2: "green"
        } 

任何指针或样品都将受到赞赏!

修订 - 我自己开始工作,以下是:。 在控制器上(例如:customerCtrl),您可以按名称获取联系人的状态并进行所需的更改 - 例如更新自定义数据对象的属性值,如下所示:      //按名称获取状态并更改自定义数据属性的值

 $state.get('contacts').data.customData1= 100;
 $state.go('contacts');// then you can make a go to that state.

我希望这会对某人有所帮助。

2 个答案:

答案 0 :(得分:25)

我自己开始工作,这是怎么做的。在控制器(例如:customerCtrl)上,您可以按名称获取联系人的状态(https://github.com/angular-ui/ui-router/wiki/Quick-Reference#statename 并寻找$ state.get([stateName]) )
获得状态后,您可以进行所需的更改 - 例如更新自定义数据对象的属性值,如下所示:

//get the state by name and change the value of custom data property 
 $state.get('contacts').data.customData1= 100;
  // then you can go to that state.
 $state.go('contacts');

我希望这会对某人有所帮助。

答案 1 :(得分:10)

如果您尝试读取当前状态的自定义数据,则可以轻松将其读取为     $state.current.data.customData1 = 100;