Un paramètre de ui-routeur dans le contrôleur et résoudre

Question

J'ai configuré le routeur ui suivant.

app.config(['$stateProvider', function ($stateProvider) { 
    $stateProvider 
     .state('global.editor', { 
      url: '/posts/editor/{id}', 
      templateUrl: '/htmls/editor.html', 
      controller: 'EditorCtrl', 
      resolve: { 
       post: ['$stateParams', 'codeService', function ($stateParams, codeService) { 
        return codeService.getPost($stateParams.id) 
       }] 
      } 
     } 
     .state('global.new', { 
      url: '/new', 
      templateUrl: '/htmls/editor.html', 
      controller: 'EditorCtrl' 
     }) 
     .state('global.newTRUE', { 
      url: '/newTRUE', 
      templateUrl: '/htmls/editor.html', 
      controller: 'EditorCtrl' 
     })   
     .state('global.editor.panels', { 
      controller: 'PanelsCtrl', 
      params: { layout: 'horizontal' }, 
      templateUrl: function (params) { return "/htmls/" + params.layout + '.html' } 
     } 
}]) 

app.controller('EditorCtrl', ['$scope', '$state', function ($scope, $state) { 
    $scope.layout = "horizontal"; 
    $scope.$watch('layout', function() { 
     $state.go('global.editor.panels', { layout: $scope.layout }); 
    }); 
}]); 

En conséquence, https://localhost:3000/#/new dans un navigateur conduit à (l'état global.editor, puis à) l'état global.editor.panels.

Maintenant, je veux ajouter un paramètre connected:

1. Je ne veux pas qu'il soit indiqué dans l'URL
2. https://localhost:3000/#/new dans un navigateur fait connected être false et https://localhost:3000/#/newTRUE dans un navigateur fait connected être true
3. connected peut être passé dans le contrôleur EditorCtrl et PanelsCtrl
4. connected peut être disponible dans le resolve de global.editor; idéalement, nous pourrions résoudre différents objets selon la valeur de connected.

Est-ce que quelqu'un sait comment accomplir cela?

Answer 1

Vous pouvez certainement utiliser le params de configuration des états de l'interface utilisateur-routeur pour ne pas afficher dans l'URL et de réaliser tous les points mentionnés.

En outre, selon # 2, vous devez connected être false pour /new et true pour /newTRUE. Nous pouvons le faire en passant true ou false comme valeur par défaut pour ces états.Quelque chose comme ceci:

$stateProvider 
    .state('global.editor', { 
     url: '/posts/editor/{id}', 
     templateUrl: '/htmls/editor.html', 
     params: { connected: null }, 
     controller: 'EditorCtrl', 
     resolve: { 
      post: ['$stateParams', 'codeService', function ($stateParams, codeService) { 
       return codeService.getPost($stateParams.id) 
      }] 
     } 
    } 
    .state('global.new', { 
     url: '/new', 
     templateUrl: '/htmls/editor.html', 
     params: { connected: false }, // default false for /new 
     controller: 'EditorCtrl' 
    }) 
    .state('global.newTRUE', { 
     url: '/newTRUE', 
     templateUrl: '/htmls/editor.html', 
     params: { connected: true }, // default true for /newTRUE 
     controller: 'EditorCtrl' 
    })   
    .state('global.editor.panels', { 
     controller: 'PanelsCtrl', 
     params: { layout: 'horizontal', connected: null }, 
     templateUrl: function (params) { return "/htmls/" + params.layout + '.html' } 
    } 

Pour # 3, afin d'accéder à connected dans vos contrôleurs (EditorCtrl et PanelsCtrl) vous pouvez injecter $stateParams au contrôleur et utiliser $stateParams.connected pour l'obtenir.

Pour # 4, (Ceci est plus ou moins semblable à achieveing ​​# 3)

Tout comme vous obtenez $stateParams.id, vous pouvez avoir $stateParams.connected aussi bien, que vous pouvez utiliser pour résoudre différents objets selon la valeur de connected. Quelque chose comme ceci:

.state('global.editor', { 
    url: '/posts/editor/{id}', 
    templateUrl: '/htmls/editor.html', 
    params: { connected: null }, 
    controller: 'EditorCtrl', 
    resolve: { 
     post: ['$stateParams', 'codeService', function ($stateParams, codeService) { 
      return $stateParams.connected ? 
       codeService.getPost($stateParams.id) : 
       codeService.getSomethingElse($stateParams.id) 
     }] 
    } 
} 

Mais, pour que cela fonctionne, assurez-vous que vous passez connected comme params lorsque vous visitez global.editor état (en utilisant $state.go ou ui-sref)

Hope this helps!

Answer 2

Vous pouvez ajouter résolution de nouvelles et newTRUE:

.state('global.new', { 
    url: '/new', 
    templateUrl: '/htmls/editor.html', 
    resolve: { 
     isConnected: function() { 
      return false; 
     } 
    }, 
    controller: 'EditorCtrl' 
}) 
.state('global.newTRUE', { 
    url: '/newTRUE', 
    templateUrl: '/htmls/editor.html', 
    resolve: { 
     isConnected: function() { 
      return true; 
     } 
    }, 
    controller: 'EditorCtrl' 
}) 

Et EditorCtrl (ou PanelsCtrl) vous pouvez l'utiliser comme:

app.controller('EditorCtrl', ['$scope', '$state', 'isConnected', function($scope, $state, isConnected) { 
    console.log("connected : " + isConnected); // you can save this value in Service and use it later. 
    ... 
}]); 

Answer 3

Vous pouvez utiliser l'approche classique - dans la détermination

Ou vous pouvez utiliser les paramètres cachés du routeur ui angulaire. Définissez params : {isConnected' : null} dans l'état parent global. Dans:

• global.newTRUE - valeur définie dans l'état $ config
• global.new - valeur définie dans l'état $ config
• global.editor.panels - paramètres définis dans transition/go ou ui-sref

définition est comme ceci:

$stateProvider 
     .state('global.newTRUE', { 
     url : '/:newTRUE', 
     params : { 
      'isConnected' : false 
     } 
    }); 
} 

et c Ontroller vous obtenez de $stateParams. problème avec cette approche est des paramètres cachés sont perd dans la page de mise à jour, sauf si est réglé valeur par défaut