CODEWITHSUNDEEP
angularjsangular-ui-router
Matthew David Jankowski
Matthew David Jankowski

Reputation: 904

How do to pass parameters to sibling ui-router named views?

I recently observed a video on egghead.io that showed how to do multiple named views (https://jsbin.com/nanifo/7/edit?html,js,output). I have an application where I need to pass some parameters to a named view.

Configuring my app like below allows parameters p1 and p2 to be passed among the 'test' states: 

angular.module("testapp",['ui.router'])
 .config(function($stateProvider) {
 .state("test", {
                abstract: true,
                url: "/test",
                templateUrl: "app/template/testabstract.html",
                controller: "TestAbstractController",
                params: {
                    p1: null,
                    p2: null
                }
            })
            .state("test.view1", {
                url: "/view1",
                templateUrl: "app/template/testview1.html",
                controller: "TestView1Controller"
            })
 )};

See the working jsbin here:https://jsbin.com/cedeqa/12/edit?html,js,output

Originally, when I altered the states to be more 'granular' it didn't work because I was putting the params in the wrong spot:

angular.module("testapp",['ui.router'])
 .config(function($stateProvider) {
 .state("test", {
                abstract: true,
                url: "/test",
                views: {
                    "footer@": { templateUrl: "app/template/footer.admin.html" },
                    "": {
                        templateUrl: "app/template/adminabstract.html",
                        controller: "AdminAbstractController",
                        params: {
                            p1: null,
                            p2: null
                        }
                    }

                }, 
            })
            .state("test.view1", {
                url: "/view1",
                templateUrl: "app/template/testview1.html",
                controller: "TestView1Controller"
            })
 )};

However, experimentation (and rereading the docs) showed me where the params really need to go:https://jsbin.com/jijuca/4/edit?html,js,output

I guess, I've managed to make it work the way I want it to...however, should I do it this way? Is there a better approach for sharing data between 'siblings'?

Upvotes: 1

Views: 1029

Answers (1)

James
James

Reputation: 630

You are passing an abstract state multiple views. Inherently, this is not how abstract states are intended for use. The documentation says

"An abstract state can have child states but cannot get activated itself. An 'abstract' state is simply a state that can't be transitioned to. It is activated implicitly when one of its descendants are activated."

https://github.com/angular-ui/ui-router/wiki/Nested-States-%26-Nested-Views

My suspicion is that this is why your controller is breaking. Typically, abstract states are used to specify urls, variables, and behaviors to all children views. For example, you might use abstract states to signify CRUD in your url. So if you are creating CRUD for dogs, your URL's might look like the following:

/dogs/index

/dogs/new

/dogs/{id}/edit

/dogs/{id}/delete

In the example above you would have an abstract class for dog, and then child states for dog.index dog.new, etc etc.

So if you are passing an abstract class multiple views, you aren't using it for it's intended purpose. Those views should be 'children' states to some type of abstract inherited state.

Those views look like great candidates to be sibling states to each other. I hope this helps. If I don't understand your problem fully, or if anyone can point me somewhere were this has been done, let me know please!

Upvotes: 1

Related Questions