web-dev-qa-db-ja.com

ui-routerのビューからカスタムデータを状態に渡すにはどうすればよいですか?

ルート設定に$stateProviderを使用しています。それらが提供するカスタムデータを利用して、一部のカスタムデータを1つの部分ページから別のページに(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";
 }

ソース

独自のテンプレートとコントローラーを備えた顧客と呼ばれる別の州があると仮定します。顧客コントローラー/ビュー内で連絡先の状態データオブジェクトの値を変更するにはどうすればよいですか?つまり、これから変更したい:

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

これに:

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

任意のポインタまたはサンプルが高く評価されます!

改訂-私はそれを自分で働いてもらいました、ここに方法があります:コントローラ(たとえば:customerCtrl)で、名前で連絡先の状態を取得し、必要な変更を加えることができます次のようにカスタムデータオブジェクトのプロパティ値を更新します。

 //get the state by name and change the value of custom data property

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

私はそれを自分で働いてもらいました、ここに方法があります。コントローラー(たとえば、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');

これが誰かの助けになることを願っています。

26
user3818435

現在の状態のカスタムデータを読み取ろうとしている場合は、$state.current.data.customData1 = 100;

11
Chandramuralis