angularjs - 複数 - ui sref パラメータ



状態が変わると、名前付きビューのリロードを防ぐ方法を教えてください。 AngularJS UI-Router (1)

このシナリオでui-routerを使用する方法は、ビューを最小公約数に移動することです。

他の言葉: ui-view="nav"が全ての細部の間で共有されていて、すべてのものについて同じ(一度だけロードされるべきであるため) - list状態の一部でなければならない状態)

親状態定義は次のように調整されます。

.state('person.list', {
    url: '/list',
    views: {
        "[email protected]": {
            templateUrl: "person.list.html",
            controller: 'PersonListController'
        }
        // here we target the person.list.html
        // and its ui-view="nav"
        '[email protected]': {
            templateUrl: "person.nav.html",
            controller: 'PersonNavController'
        }
    }

だからトリックはどこですか? 角度ui-routerのパワーで。 各状態の定義中に現在のビューをターゲットにすることができます。 今度は、 navビューはlist状態定義の一部です - つまり、詳細切り替え中にリロードされません(詳細についてはhereで確認してください)

定義された命名規則を使うだけでいいです:

上記の文書から引用した行はほとんどありません。

views: {
    ////////////////////////////////////
    // Relative Targeting             //
    // Targets parent state ui-view's //
    ////////////////////////////////////

    // Relatively targets the 'detail' view in this state's parent state, 'contacts'.
    // <div ui-view='detail'/> within contacts.html
    "detail" : { },            

    // Relatively targets the unnamed view in this state's parent state, 'contacts'.
    // <div ui-view/> within contacts.html
    "" : { }, 

    ///////////////////////////////////////////////////////
    // Absolute Targeting using '@'                      //
    // Targets any view within this state or an ancestor //
    ///////////////////////////////////////////////////////

    // Absolutely targets the 'info' view in this state, 'contacts.detail'.
    // <div ui-view='info'/> within contacts.detail.html
    "[email protected]" : { }

    // Absolutely targets the 'detail' view in the 'contacts' state.
    // <div ui-view='detail'/> within contacts.html
    "[email protected]" : { }

私は自分のアプリケーションで優れたui-routerモジュールを使用しています。 その一環として、名前付きビューを使用して、アプリで使用している「動的サブナビゲーション」を管理しています。

次の点を考慮してください。

$urlRouterProvider.otherwise('/person/list');

$stateProvider
    .state('person', {
        url: '/person',
        abstract: true,
    })
    .state('person.list', {
        url: '/list',
        views: {
            "[email protected]": {
                templateUrl: "person.list.html",
                controller: 'PersonListController'
            }
        }
    })
    .state('person.details', {
        url: '/{id}',
        views: {
            '[email protected]': {
                templateUrl: "person.details.html",
                controller: 'PersonController'
            },
            '[email protected]': {
                templateUrl: "person.nav.html",
                controller: 'PersonNavController'
            }
        }
    });

ユーザーが最初にアプリを訪れると、その人のリストが表示されます。 ユーザーがクリックすると、詳細ページに移動します。 かなり基本的なもの。 それが助けになるならば、ここにマークアップがあります...

<div>
    <aside ui-view="nav"></aside>
    <div ui-view="main"></div>
</div>

しかし、 PersonNavControllerはRESTサービスを呼び出して人のリストを取得するので、人を見ると、ユーザーは兄弟要素をナビゲートできます。 上記の方法を使用すると、テンプレートとコントローラが再レンダリングされるため、内容が変わらないにもかかわらず、クリックするたびに遅延が発生します。

'[email protected]'ビューをロードしたままにして、 '[email protected]'ビューのみを更新する方法はありますか?





angular-ui-router