12

古典的なリスト/詳細 UI を実装しようとしています。リスト内のアイテムをクリックすると、リストを表示したままそのアイテムの編集フォームを表示したい。私は Angular の 1 ページあたり 1 ビューの制限を回避しようとしており、すべての URL を同じコントローラー/ビューにルーティングすることでそれを行うことにしました。（おそらくこれが私の問題の根源であり、私は代替手段を受け入れています。）

ルーティング：

$routeProvider
    .when('/list', { templateUrl: '/Partials/Users.html', controller: UserController })
    .when('/edit/:UserId', { templateUrl: '/Partials/Users.html', controller: UserController })
    .otherwise({ redirectTo: '/list' });

ビュー (/Partials/Users.html):

<!-- List of users -->
<div ng-repeat="user in Users">
    <a href="*/edit/{{ user.Id }}">Edit {{ user.Name }}</a>
</div>

<!-- Edit form -->
<div>
    {{ SelectedUser.Name }}
</div>

コントローラ：

function UserController($scope, $routeParams) {
    // the model for the list
    $scope.Users = GetUserListFromService();

    // the model for the edit form
    if ($routeParams.UserId != null)
        $scope.SelectedUser = GetUserFromService($routeParams.UserId);
}

問題:

  1. 編集リンクをクリックすると、コントローラーが新しいスコープで再インスタンス化されるため、ユーザー リストを再初期化する必要があります。(より複雑な例では、ユーザーからの入力をモデルにバインドして保存することができ、これも失われます。) 前のルートからのスコープを保持したいと思います。
  2. 別のコントローラーを使用することをお勧めします (または、他の多くの Angular 開発者が不満を言っているように、複数の表示ビューを持つ機能!) が、スコープを失うという同じ問題につながります。
4

4 に答える 4

1

このシナリオでは、Angular Multi Viewが天の恵みであることがわかりました。これにより、ルートが変更されてもスコープを保持し、ビューをネストせずに複数のコントローラーで同じルートを共有できます。

ページに 2 つ以上のビューがある場合は、Angular Multi View をお勧めします。そうしないと、ui-router を使用するときに、複数のビューをネストすると、非常に速く面倒になります。

于 2013-08-07T16:41:18.930 に答える
0

私も同じ問題を思いつきましたが、プラグインが絶対に避けられない場合、私は個人的にプラグインが好きではありません。シングルトン部分をサービスに移動しました。

私の場合、 :id[/:mode] ルートがあり、ユーザーがモードまたは id だけを変更した場合、別の方法で反応したいと考えています。したがって、以前のIDを知る必要があります。

そのため、状態を更新する activate メソッドを持つサービスがあります。そして、スコープは次のコードで毎回再初期化されます。

module.controller('MyController', ['$scope', '$routeParams', 'navigator', function($scope, $routeParams, navigator) {
    var id = null;
    var mode = null;

    if (typeof($routeParams.id)!='undefined')
    {
        id = $routeParams.id;
    }

    if (typeof($routeParams.mode)!='undefined')
    {
        mode = $routeParams.mode;
    }

    navigator.activate(id, mode);

    $scope.items = navigator.items;
    $scope.activeItem = navigator.activeItem;
    $scope.modes = navigator.modes;
    $scope.activeMode = navigator.activeMode;
}]);

activate メソッドでは、id をシングルトンの activeItem.id と比較して、異なる反応を示すことができます。

于 2013-08-23T11:20:29.397 に答える