UI-Router で ui-sref を使用してコントローラーにパラメーターを渡す
UI-Router で、ui-sref を介してコントローラーにパラメーターを渡す州間でデータを共有するための重要な要素です。このタスクを効果的に実行する方法は次のとおりです:
まず、以下に示す更新された状態定義に見られるように、コロン構文を使用してパラメーター プレースホルダーを含むターゲット状態の URL を定義します。
$stateProvider .state('home', { url: '/:foo?bar', ...
この例では、'home' 状態は URL パスのパラメーター 'foo' と 'bar' を予期します。
次に、これらのパラメーターを正しく受け取るようにコントローラーを調整します:
.controller('MainRootCtrl', function($scope, $state, $stateParams) { // ... var foo = $stateParams.foo; // Accessing 'fooVal' var bar = $stateParams.bar; // Accessing 'barVal' // ...
このコントローラーでは、$stateParam の代わりに $stateParams を挿入します。これにより、渡されたパラメーターにアクセスできるようになります。
さらに、UI-Router は、状態内の 'params' オブジェクトを通じて詳細なパラメーター構成も提供します。意味。このオプションを使用すると、デフォルト値を指定したり、型制約を課したりすることができます。
たとえば、次の拡張パラメータ設定を考えてみましょう。
.state('other', { url: '/other/:foo?bar', params: { foo: { value: 'defaultValue', squash: false, }, bar: { array: true, // Treat bar as an array }, hiddenParam: 'YES', // Not present in the URL }, ...
この設定は、デフォルト値を定義する方法を示しています。
最後に、'ui-sref' 属性または '$state.go()' メソッドを使用して目的の状態に移動するときに忘れずにパラメータを渡します。
<a ui-sref="other({foo: 'fooVal1', bar: 'barVal1'})">...</a> $state.go('home', {foo: 'fooVal2', bar: 'barVal2'});
このアプローチを実装すると、UI-Router の ui-sref を使用してパラメーターをコントローラーに効率的に渡すことができ、AngularJS アプリケーション内でのシームレスな状態遷移とデータ共有が保証されます。
以上がUI-Router で ui-sref を使用してコントローラーにパラメーターを渡す方法は?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。