AngularJS using same controller for multiple views in single state

Question

I am using angular 1.5 and UI route.

Due to structure limitation we are loading under single state both filters view and content view(mostly for dataset presentation).

I'm trying to achieve single-scope for multiple views, it means: I want my filter view to be able trigger functions from loaded controller on content view.

My state deceleration looks like this:

.state('somestate', {
    url: '/somestate',
    views : {
        "content" : {
            templateUrl: 'dataset.html',
            controller: "someController"
        },
        "filters" : {
            templateUrl: 'filters.html',
        }

    }

})

I want to be able to trigger functions from filters.html, something like this

<div ng-click="doSomething()"></div>

Considering doSomething() deceleration made inside someController

Possible duplicate of stackoverflow.com/questions/9293423/… — Gangadhar Jannu
– Gangadhar Jannu, Commented Oct 5, 2016 at 11:42
@GangadharJannu it is a different issue. I don't want to have 2 controllers, I want to use single controller(1 scope) for multiple views. — Michael Kisilenko
– Michael Kisilenko, Commented Oct 5, 2016 at 11:44
You can get the instance of 'someController' in filters.html and call the function accordingly — Gangadhar Jannu
– Gangadhar Jannu, Commented Oct 5, 2016 at 11:46
I want to achieve clean solution. how would you suggest to get the instance of 'someController' ? — Michael Kisilenko
– Michael Kisilenko, Commented Oct 5, 2016 at 11:48
If you want to achieve clean solution then go for service/factory. You should move the common functionality in controllers to service/factory and call the same in your respective controllers — Gangadhar Jannu
– Gangadhar Jannu, Commented Oct 5, 2016 at 11:58

Steeve Pitis · Accepted Answer · 2016-10-05 11:54:43Z

1

I'm not sure to understand your problem ... If you want to use the same controller, just do it ...

This way :

.state('somestate', {
    url: '/somestate',
    views : {
        "content" : {
            templateUrl: 'dataset.html',
            controller: "someController"
        },
        "filters" : {
            templateUrl: 'filters.html',
            controller: "someController"
        }

    }

})

or using ng-controller in your template file.

answered Oct 5, 2016 at 11:54

Steeve Pitis

4,4631 gold badge24 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Michael Kisilenko Over a year ago

This way I would have 2 instances of someController. I want to use only 1 single instance (shared scope)

Steeve Pitis Over a year ago

Could you add a snippet to your original post ?

George Kagan · Accepted Answer · 2016-10-05 11:54:13Z

0

Use "controller as" syntax.

If the controller is declared in the state:

controller: 'SomeController`,
controllerAs: 'some'

If inside an html tag:
ng-controller="SomeController as some"

Then inside your templates you can access the controller's scope as some.someFunc()

answered Oct 5, 2016 at 11:54

George Kagan

6,1448 gold badges50 silver badges50 bronze badges

3 Comments

Michael Kisilenko Over a year ago

I have already tried it. I'm not sure why it didn't work, maybe it does not because filter's view is inside other directive, so if we lookup scopes encapsulation we will find that filters is somewhere a child -> child -> child of the content view.

George Kagan Over a year ago

So what exactly are you trying to achieve? It's unclear

Michael Kisilenko Over a year ago

1 controller initialized by view1 and view2 is only a template loaded which triggers methods from shared controller. single controller's scope shared on multiple views

Collectives™ on Stack Overflow

AngularJS using same controller for multiple views in single state

2 Answers 2

2 Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related