AngularJS UI Router Named Views - Have Controller Know View

Question

We are using the ui-router in AngularJS, and are using named views. We have one state that has three named views, and the controller/template that is used for each named view is determined by parameters passed in. When a controller is loaded into one of the named views we need the controller to be able to know which named view it is loaded into. Is there anyway to do that?

Here is the code that configures the state and the named views.

.state('state1', {
    url: '/state1',
    templateUrl: 'views/state1.html',
    controller: 'state1Controller'
})
.state('state1.nested', {
    url: "/:post/:current/:pre",
    views: {
        "view1": {
            templateUrl: function ($stateParams) { return "views/" + $stateParams.post + ".html" },
            controllerProvider: function ($stateParams) {
                var ctrlName = $stateParams.post + "Controller";
                return ctrlName;
            }
        },
        "view2": {
            templateUrl: function ($stateParams) { return "views/" + $stateParams.current + ".html" },
            controllerProvider: function ($stateParams) {
                var ctrlName = $stateParams.current + "Controller";
                return ctrlName;
            }
        },
        "view3": {
            templateUrl: function ($stateParams) { return "views/" + $stateParams.pre + ".html" },
            controllerProvider: function ($stateParams) {
                var ctrlName = $stateParams.pre + "Controller";
                return ctrlName;
            }
        }
    }
})

Is there any way for a controller to know what named view it has been loaded into? Or is there a way to pass a different parameter values down to each nested view so that it can be identified by the parameter?

Stefan Bradstreet · Accepted Answer · 2015-10-30 21:00:29Z

This may not be the most angular way to do things but i created a directive to be top on the top level of the template that would get the the name and then call a method on the parents scope controller with that name.

View2Template.html

<div my-directive>HelloWorld</div>

MyDirectives.js

app.directive('myDirective', function () {
    return {
        restrict: 'A',            
        link: function (scope, element) {
            var parent = element.parent();
            var view = parent[0].attributes["ui-view"].value;
            scope.init(view);
        }
    }
});

Collectives™ on Stack Overflow

AngularJS UI Router Named Views - Have Controller Know View

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related