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

时间:2022-01-28 12:56:06

I'm using $stateProvider for my route configuration. I wanted to take advantage of custom data they provide to pass some custom data from one partial page to the other (on ng-click).

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

This is the best i got so far:

这是我到目前为止最好的:

Attach Custom Data to State Objects

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

You can attach custom data to the state object (we recommend using a data property to avoid conflicts).

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

// 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"
        }
    }) 

With the above example states you could access the data like this:

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

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

Source

资源

Assume I have another state called customers with its own template and controller. How can I change the value of contacts's state data object within customers controller/view? i.e: I want to change from this:

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

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

to this:

对此:

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

Any pointer or sample will be appreciated!

任何指针或样品将不胜感激!

Revised - i got it working by myself and here is how:. on a controller (say: customerCtrl), you can get contact's state by name and make the change you want-such as updating the custom data object's property value like as follows: //get the state by name and change the value of custom data property

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

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

I hope this will help someone.

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

2 个解决方案

#1


23  

I got it working by myself and here is how. On a controller (say: customerCtrl), you can get contact's state by name(https://github.com/angular-ui/ui-router/wiki/Quick-Reference#statename and look for $state.get([stateName]) )
Once you get the state, you can make the change you want-such as updating the custom data object's property value as follows:

我让它自己工作,这是如何。在控制器(例如: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');

I hope this will help someone.

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

#2


6  

If you are trying to read custom data for the current state you can easily read it as $state.current.data.customData1 = 100;

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

#1


23  

I got it working by myself and here is how. On a controller (say: customerCtrl), you can get contact's state by name(https://github.com/angular-ui/ui-router/wiki/Quick-Reference#statename and look for $state.get([stateName]) )
Once you get the state, you can make the change you want-such as updating the custom data object's property value as follows:

我让它自己工作,这是如何。在控制器(例如: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');

I hope this will help someone.

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

#2


6  

If you are trying to read custom data for the current state you can easily read it as $state.current.data.customData1 = 100;

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