0

I'm creating states via ui-router, and attaching them to the same controller. (although obviously different instances of that controllers are initialized)

Inside of that controller, I'd like to know the name of the template it was initialized for.

My idea was to somehow pass to that controller properties in the stateProvider (ui-sref doesn't solve opening the browser with a deep link), but from my searches so far it appears it can't be done.

I can't simply check the name of the current state, since I'm working with multiple views.

I'm working with the same controller for multiple states and views, the controller can act accordingly as soon as he can know the name of the template he's attached to.

Here's how I create my states and views:

.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {
    $urlRouterProvider.otherwise('/home');

    var controller = 'textFile';
    var base = 'templates';
    var views = ['home', 'about'];

    for (var i = 0; i < views.length; i++)
    {
        var view = views[i];

        $stateProvider.state(view, {
            url: '/' + view,
            views: {
                'header': {
                    templateUrl: base + '/header.html',
                    controller: controller
                },
                'page': {
                    templateUrl: base + '/' + view + '.html',
                    controller: controller
                },
                'footer': {
                    templateUrl: base + '/footer.html',
                    controller: controller
                }
            }
        });
    }
}]);

I need to be able to know in textFile for instance if it's attached to header.html, footer.html, etc...

Improve this question

1 Answer 1

Reset to default
1

Why don't you use a resolve, so that you can access the unique data for each controller instance. For example:

$stateProvider.state(view, {
    url: '/' + view,
    views: {
        'header': {
            templateUrl: base + '/header.html',
            controller: 'textFile',
            resolve: {
                viewName: function() { return 'header'; }
            }
        },
        'page': {
            templateUrl: base + '/' + view + '.html',
            controller: 'textFile',
            resolve: {
                viewName: function() { return 'page'; }
            }
        },
        'footer': {
            templateUrl: base + '/footer.html',
            controller: 'textFile',
            resolve: {
                viewName: function() { return 'footer'; }
            }
        }
    }
});

Then you can access the value in your controller:

.controller('textFile', function($scope, viewName){
    console.log(viewName);
});
Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

Cool idea. I have never before thought of a legitimate real-world use for view-level resolves.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.