如何在另一个状态内渲染角度ui路由状态？

Question

I have two ui route states S1 and S2 . S1 is a query state, having a form by which we query some data. S2 is the result state in which I am showing that data which I got from S1 state.

Now I want to provide S1 (query state) within S2 result state so that user can modify there query in S2 state itself.

How I can access S1 template and controller in S2 state ?

Code:

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

I want to use form state within result state.

Note: I am new in angular, please provide me some sugestions for such kind of scenerio's.

Answer 1

This is somewhat of a subjective answer, but having used ui-router quite a lot, I think it's great for handling your various routes but if you want modular reusable parts to use on different pages I'd claim you'll have an much easier time just using angular's native directives instead.

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

http://plnkr.co/edit/JynPLQQgE1UqVMBOLvdS?p=preview Plunk for completeness. (You may want to note that ui-router is completely superfluous in this example.)

As for communicating between controllers, one way is to use $broadcast , $emit and $on . But I much prefer a service that holds your results, and inject it into both controllers for easy access.

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