1

I have the following configuration of state:

  .state('main.content', {
    url: '',
    views: {
      'content-one': {
        templateUrl: 'templates/staging-area/content.html',
        controller: 'ContentCtrl'
      },
      'content-two': {
        templateUrl: 'templates/staging-area/content.html',
        controller: 'ContentCtrl'
      }
    }
  })

How can I get the name of view inside of controller?

tolyasik
  • 345
  • 2
  • 13
  • Why would you need the template name in the first place? Maybe you're approaching this incorrectly. – vvondra Jun 26 '15 at 13:01

2 Answers2

1

You can access state configuration objects with the help of helper method $state.get() (link to docs). If you do not specify a route name as a first parameter, than it well return the entire configuration for all the routes.

app.controller('AppCtrl', function ($state) {

  var stateConfig = $state.get('main.content');

});

Update:

This seems to be a bit tricky and not a solid solution, but when you set a container for a view, you specify it's name directly like <div ui-view="content-one"></div>, so you could try to query this element which sets a view using:

var element = angular.element('[ui-view]');
var name = element.attr('ui-view'); // 'content-one'

But be aware that you may have multiple views on a page. So the following would be more safe:

<div class="main-content" ui-view="content-one"></div>

JS:

var element = angular.element('.main-content');
var name = element.attr('ui-view'); // 'content-one'
Michael Radionov
  • 12,859
  • 1
  • 55
  • 72
  • 1
    I need to get current view name inside of controller. Unfortunatelly `$state.get()` does not contain such information. E.g. 'content-one' or 'content-two' depends on for what view a controller has been created. – tolyasik Jun 30 '15 at 04:52
  • As I understand `views` option in angular-ui-router, it allows you to have multiple views on the same page, so you could render different parts of the page independently. If you use the same controller for multiple views, it does not reference to a particular view directly, because it may render some other views on the same page at the same time. I've added a possible workaround to my answer. – Michael Radionov Jun 30 '15 at 07:59
  • This will not work for the question example, as there are 2 nested views using the same controller for each. If you put this code in the controller it will simply find the name of the view which has the class name attached, which isn't necessarily the correct view (as there are two of the same view). It won't be able to differentiate if the name of the view it has retrieved is actually the view that the code is running for. – davoc bradley May 11 '16 at 14:52
  • @davocbradley, I agree with you, that if both views are displayed on the page at the same time, then `element` will return reference to only one (first) of them. My answer is a very hacky approach, which tries to fix original design issues. Controller must not have any logic, which depends on the view it is attached to. Anyway, you might take a look at this answer, seems like there is an easier way of getting current scope element - http://stackoverflow.com/questions/12960701/how-do-i-get-current-scope-dom-element-in-angularjs-controller – Michael Radionov May 11 '16 at 21:25
  • That approach is also hacky :-) Never mind though, sometimes a hack is what you need to do. – davoc bradley May 18 '16 at 12:44
0

you can use $viewcontentLoading or $viewContentLoaded event to get the current viewName. Here is a code snippet

$rootScope.$on('$viewContentLoading', function(event, viewName, viewContent){
    console.log('current view name : ', viewName);
});
Draken
  • 3,134
  • 13
  • 34
  • 54
Senthil
  • 1