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 http://stackoverflow.com/questions/9293423/can-one-controller-call-another — Gangadhar Jannu, Oct 05 '16 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, Oct 05 '16 at 11:44
You can get the instance of 'someController' in filters.html and call the function accordingly — Gangadhar Jannu, Oct 05 '16 at 11:46
I want to achieve clean solution. how would you suggest to get the instance of 'someController' ? — Michael Kisilenko, Oct 05 '16 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, Oct 05 '16 at 11:58
I could use event driven design to solve this issue, my question is if there is anyway to configure state provider to support my requirements. — Michael Kisilenko, Oct 05 '16 at 12:00

score 1 · Answer 1 · answered Oct 05 '16 at 11:54

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 05 '16 at 11:54

Steeve Pitis

4,283
1
21
24

This way I would have 2 instances of someController. I want to use only 1 single instance (shared scope) – Michael Kisilenko Oct 05 '16 at 11:55
Could you add a snippet to your original post ? – Steeve Pitis Oct 05 '16 at 12:11

score 0 · Answer 2 · answered Oct 05 '16 at 11:54

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 05 '16 at 11:54

George Kagan

5,913
8
46
50

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. – Michael Kisilenko Oct 05 '16 at 12:01
So what exactly are you trying to achieve? It's unclear – George Kagan Oct 05 '16 at 12:01
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 – Michael Kisilenko Oct 05 '16 at 12:05

AngularJS using same controller for multiple views in single state

2 Answers2