AngularJS: plusieurs vues avec routage sans perte de portée

Je suis en train de mettre en œuvre un classique de la liste/les détails de l'INTERFACE utilisateur. Lorsque vous cliquez sur un élément dans la liste, je veux afficher un formulaire d'édition pour cet article tout en affichant la liste. Je suis en train de travailler autour Angulaire de 1-vue-par-page de limitation et a décidé de le faire en ayant toutes les Url acheminés vers le même contrôleur/vue. (C'est peut-être la racine de mon problème et je suis ouvert à d'autres options.)

De routage:

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

La vue (/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>

Contrôleur:

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);
}

Problèmes:

  1. Lorsque vous cliquez sur un lien d'édition, le contrôleur est réintroduit avec un nouveau champ d'application, j'ai donc ré-initialisation de la liste des Utilisateurs. (Dans un exemple plus complexe, je pourrais avoir une entrée de l'utilisateur stockées lié au modèle et cela permettrait aussi de se perdre.) Je préfère conserver le champ d'application de l'itinéraire précédent.
  2. Je préfère utiliser un contrôleur séparé (ou, comme beaucoup d'autres Angulaire développeurs se sont plaints, la possibilité d'avoir plusieurs affichée point de vue!) mais qui aboutit au même problème de la perte de portée.

source d'informationauteur Keith | 2013-04-18

  1. 14

    Essayez d'utiliser l'interface utilisateur du routeur: http://github.com/angular-ui/ui-router.

    Ils ont vues imbriquées et plus facile la gestion de l'état que angulaire de routage par défaut 🙂

  2. 7

    De multiples points de vue ne sont pas pris en charge dans le noyau de AngularJS. Vous pouvez utiliser cette bibliothèque pour cette fin qui prend en charge n'importe quel montant de vues imbriquées sur la page, où chaque niveau est configuré de façon indépendante avec son propre contrôleur et le modèle:

    http://angular-route-segment.com

    C'est beaucoup plus simple à utiliser que l'interface utilisateur du routeur. Exemple de config peut ressembler à ceci:

    $routeSegmentProvider.

when('/section1',          's1.home').
when('/section1/prefs',    's1.prefs').
when('/section1/:id',      's1.itemInfo.overview').
when('/section1/:id/edit', 's1.itemInfo.edit').
when('/section2',          's2').

segment('s1', {
    templateUrl: 'templates/section1.html',
    controller: MainCtrl}).

within().

    segment('home', {
        templateUrl: 'templates/section1/home.html'}).

    segment('itemInfo', {
        templateUrl: 'templates/section1/item.html',
        controller: Section1ItemCtrl,
        dependencies: ['id']}).

    within().

        segment('overview', {
            templateUrl: 'templates/section1/item/overview.html'}).

        segment('edit', {
             templateUrl: 'templates/section1/item/edit.html'}).

        up().

    segment('prefs', {
        templateUrl: 'templates/section1/prefs.html'}).

    up().

segment('s2', {
    templateUrl: 'templates/section2.html',
    controller: MainCtrl});
  3. 1

    J'ai trouvé Angulaire De L'Affichage Multiple une véritable aubaine pour ce scénario. Il vous permet de préserver le champ d'application que les modifications d'itinéraire et vous permet de plusieurs contrôleurs de partager le même itinéraire sans imbrication votre point de vue.

    Je recommande Angulaire de l'Affichage multiple si vous avez plus de 2 points de vue sur votre page. Sinon, lors de l'utilisation de l'interface utilisateur du routeur, de l'imbrication de plusieurs points de vue devient malpropre vraiment rapide.

  4. 0

    Je suis venu avec le même problème et personnellement, je n'aime pas les plugins quand ils ne sont pas absolument inévitable. Je viens d'emménager singleton partie d'un service.

    Dans mon cas, il y a :id [/:] les routes et je tiens à réagir de manière différente si l'utilisateur change juste le mode d'identification ou de trop. Donc, je sais précédente id.

    Donc, il y a un service à activer méthode qui met à jour son état. Et le champ d'application est réinitialisé à chaque fois avec le code suivant.

    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;
}]);

    Dans la méthode activate je peux comparer id pour le singleton activeItem.id et réagissent différemment.