web-dev-qa-db-ja.com

angular ui router？を使用してビューをng-hideおよびng-showする方法は？

アプリケーションに、ユーザーのリストを示すテーブルなどのリストページがあるとします。テーブルの各行には「編集」というボタンがあり、これをクリックすると、ブラウザーの右側にそのユーザーのコンテンツを編集するためのフォームを備えた右パネルが表示されます。フォームが保存されるか閉じられると、右側のパネルが消えます。

どのようにAngular UI Routerを取得して、編集状態の開始および終了時に右側のパネルを自動的に表示/非表示にしますか？デフォルトでは、テンプレートは追加および削除されますが、コンテナー自体は画面上にまだ存在します。

UIルーターのデモアプリケーションでは、htmlレイアウトにすべての子状態に割り当てられた空のスペースがありましたが、作成中のアプリケーションでは、パネルが使用されていない場合は非表示にし、画面全体を-状態が出入りするとき。これを行うには、ng-showとng-hideを使用する必要があると思います。 UIルーターでこれを行うにはどうすればよいですか？

ありがとう！

javascriptjqueryangularjsangular-ui-router
35
egervari

私が思いついた最良の解決策は次のようなものでした：

<div id="rightView" ng-show="$state.current.name === 'adminCompanies.list.edit'">
    <div ui-view autoscroll="false"></div>
</div>
34
egervari

Angularのui-routerは、ネストされたビューを切り替えるためのクリーンな方法を提供します。

最初に$ stateを仮想の「リストページ」コントローラに挿入し、次にローカルの$ scope：に公開します

.controller('ListPageCtrl', function($scope, $state) {
    $scope.$state = $state;
})

注入した$ state変数には、ニースの "includes"メソッドがあります。 $ state.includes（）は文字列を引数として取り、その文字列を現在の状態名と照合します。状態名が文字列と一致する場合はtrueを返し、一致しない場合はfalseを返します。これにより、ng-showまたはng-hideを使用すると非常に便利です。

egervariと同じテンプレートで代わりにui-routerの$ state.includes（）を使用します

<div id="rightView" ng-show="$state.includes('list.edit')">
    <div ui-view="edit" autoscroll="false"></div>
</div>

Includeメソッドに切り替える以外に、一意の名前をui-view属性に追加しました。 2つ以上のビューがある場合は、ビューに名前を付けます。これにより、テンプレートとロジックで簡単に追跡できます。

ビューに名前を追加するには、1を2に変更します

// 1
.state('list.edit', {
    url: 'list/edit/:id',
    templateUrl: 'template/edit.html',
    controller: 'ListPageEditCtrl'
})

// 2
.state('list.edit', {
    url: 'list/edit/:id',
    views: {
        'edit': { // this is the unique name you can reference later
            templateUrl: 'template/edit.html',
            controller: 'ListPageEditCtrl'
        }
    }
});
42
Tyler Buchea

いずれにしても、この問題を解決するには、angularアプリの.runセクションで次のように宣言するようにしてください。

angular.module('yourApp', ['ui.router'])

    .run(
        ['$rootScope', '$state', '$stateParams',
            function ($rootScope, $state, $stateParams){                    
                $rootScope.$state = $state;
                $rootScope.$stateParams = $stateParams;
            }
            ]
    )

それ以外の場合、$ stateも$ stateParamsも内部テンプレートからアクセスできません。これが機能していなかったため、キーボードに頭をぶつけた直後に、ui-router docsを読んでサンプルアプリのコードを確認しました。

2
JSantaCL

URLは、クエリ文字列/stuff/1?editまたは/stuff/1を表す/stuff/1?viewを使用して、状態モードを反映する必要があります

reloadOnSearch=falseを使用して、AngularJSにビューをリロードしないように指示できます。

http://docs.angularjs.org/api/ngRoute.$routeProvider

controller内で、$routeParamsを使用して状態モード（viewまたはedit）を確認します。編集クリックイベントをキャッチし、モデルをバーに渡し、それに応じて表示を切り替えます。

これらの興味深いリンクを参照してください。

AngularJSでコントローラーをリロードせずにパスを変更できますか？

Angularビューの再レンダリングなしのJS）でのURLの更新

0
roland