Reuse `ui-route` controller that expects a `resolve`d parameter

Question

I want to be able to reuse my ui-router-wired controllers. They currently receive parameters from ui-router resolve to render their templates. Can I reuse those controllers without ui-router?

For example, I do this with ui-router:

.controller('DetailController', function ($scope, detailData) {
    $scope.controllerDetail = detailData + "is awesome!";
})
.config(function ($stateprovider) {
    $stateprovider.state('detailState', {
        resolve: {
            detailData: function () { return "John Doe"; }
        },
        template: '<p>{{ controllerDetail }}</p>',
        controller: 'DetailController'
    }
}

Now, I want to use the same controller to render a fixed sub-panel elsewhere. For example:

<master ng-init='childData="Jane Smith"'>
    <detail ng-controller='DetailController' ng-controller-params="{ detailData : childData">
        <p>{{ controllerDetail }}</p>
    </detail>
</master>

Of course, in practice, there are actually template files, and some functionality in the controller worth de-duplicating. Also, the resolve data in the first example and init data in the second example both arrive over the wire, but in the second example it arrives as a child object of a larger request rather than an individually-navigated item. Also, I assign my controllers in directives rather via HTML attributes.

oh ok.. Got it, pls ignore my stupid question. What cant you just resolve it via another state registration (), after all it is a better practice IMHO to instantiate controllers via router rather than instantiating it via ng-controller directive as much as possible. — PSL
– PSL, Commented Mar 13, 2015 at 1:52
You do not necessarily need navigation actually, you could create child states with ui.router unlike ngRouter, something like a partial view to isolate a piece of functionality for example. — PSL
– PSL, Commented Mar 13, 2015 at 1:56
I once provided an answer to a related (perhaps not exact duplicate) question - see if it helps: stackoverflow.com/a/28870149/968155. Named views, as @PSL suggested, is definitely one approach and perhaps ideal, but this is here for completeness-sake. — New Dev
– New Dev, Commented Mar 13, 2015 at 3:32
@shannon, yes - see the example in plunker in that question. In one instance name variable is passed — New Dev
– New Dev, Commented Mar 13, 2015 at 5:23

jakub.g · Accepted Answer · 2016-07-19 16:58:06Z

1

In my case, which is a similar though limited subcase, I had multiple ui-router routes with resolve() defined, and only one place with the controller instantiated in a template via ng-controller, and the value passed to the controller in such case was a known, constant value.

In such case, you can simply do

.value('detailData', 'here goes the default/fallback value')

If you have multiple usages of ng-controller which should have different detailData, you need to find a better solution obviously.

answered Jul 19, 2016 at 16:58

jakub.g

41.9k12 gold badges101 silver badges142 bronze badges

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

Collectives™ on Stack Overflow

Reuse `ui-route` controller that expects a `resolve`d parameter

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related