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

Posted 2021-04-06

我正在使用$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.

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

答案

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

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

另一答案

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