Как отобразить состояние angular ui-route в другом состоянии?

У меня есть два состояния маршрута пользовательского интерфейса S1 и S2. S1 — это состояние запроса, имеющее форму, по которой мы запрашиваем некоторые данные. S2 — это состояние результата, в котором я показываю данные, полученные из состояния S1.

Теперь я хочу предоставить S1 (состояние запроса) в состоянии результата S2, чтобы пользователь мог изменить там запрос в самом состоянии S2.

Как я могу получить доступ к шаблону S1 и контроллеру в состоянии S2?

Код:

$stateProvider
        .state('form', {
            url: '/form',
            templateUrl: '/modules/form',
            controller: 'formController'
        })
        .state('result', {
            url: '/result',
            templateUrl: '/modules/result',
            controller: 'resultController'
        })

Я хочу использовать состояние form в состоянии result.

Примечание: я новичок в angular, пожалуйста, предоставьте мне несколько предложений для такого рода сценариев.


angularjs angular-ui-router
person Anshul    schedule 15.06.2015    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Это несколько субъективный ответ, но я довольно часто использовал ui-router, и я думаю, что он отлично подходит для обработки ваших различных маршрутов, но если вы хотите, чтобы модульные многоразовые части использовались на разных страницах, я бы сказал, что вам будет намного проще время, просто используя собственные директивы angular.

app.directive('someform', function() {
  return {
    restrict: 'E',
    templateUrl: 'form.html',
    controller : 'formController'
  };
});

http://plnkr.co/edit/JynPLQQgE1UqVMBOLvdS?p=preview Plunk для полноты. (Возможно, вы захотите заметить, что ui-router в этом примере совершенно лишний.)

Что касается связи между контроллерами, одним из способов является использование $broadcast, $emit и $on. Но я предпочитаю сервис, который хранит ваши результаты и внедряет их в оба контроллера для легкого доступа.

app.factory('Results', function(){
  results = [{value:'aaaa'},{value:'bbb'}, {value:'cccc'}];
  return {
    get : function(){
      return results;
    },
    add : function(value){
      results.push(value);
    }
  }
})

http://plnkr.co/edit/IC6OysrLw64lG8ed1sfL?p=preview

person ippi    schedule 16.06.2015