让我的角度控制器检查一下它在ui-router中的位置

Question

I'm using ui-router with angularjs. I want to write a template for a view that will show a image depending on what the view is. here's my example state.

$stateProvider
    .state('index', {
        url: "",
        views: {

             "topStormtrooper": { 
                templateUrl: '/components/stormtroopers/stormtroopers.html',
                controller: "stormtroopersCtrl"
            },

             "bottomStormtrooper": { 
                templateUrl: '/components/stormtroopers/stormtroopers.html',
                controller: "stormtroopersCtrl"
            }
        }
    })

my controller looks like this

.controller('stormtroopersCtrl', ['$scope', '$http', '$stateParams', function ($scope, $http, $stateParams) {
//   
$scope.stormtrooper = $stateView; //it should be something like this hopefully


}]);

The template is all the same just the image will be different depending which view it is loaded into. Currently I just added a new controller for each view and load the image based on that. But I feel like I should be able to do this with just one controller and the controller should be able to detect what the view is. I know you can detect the state but I want go deeper and get the view.

Any Ideas?

Answer 1

You can access the current state configuratin object like this:

$state.current

For further information take a look at the $state

Answer 2

You can listen to the $viewContentLoaded function in your controller as per the ui-router documentation

For example:

.controller('stormtroopersCtrl', ['$scope', '$http', '$stateParams', function ($scope, $http, $stateParams) {

$scope.$on("$viewContentLoaded",function(event,viewName){ //listen for when the content is loaded into the view
    $scope.currentView = viewName;  //assign the view name in a model
    console.log($scope.currentView);
    //do something because you got the view name now....

});

}]);

Answer 3

You do not need to change your state just for an image in template. You can make it with scope variables.

 angular.module('app',[]) .controller('stormtrooperCtrl', ['$scope', function ($scope) { // $scope.selected = 0; $scope.images = [ "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSz6dBOOsFVAeSilVEIO9dqwrY4R5gCzEMcrRVZguhYhr9PVJsThQ", "http://www.wallpapereast.com/static/images/Wallpaper-Nature-8B71.jpg", "http://www.intrawallpaper.com/static/images/1250654-for-laptop-nature.jpg" ]; }]); 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script> <div ng-app="app"> <div ng-controller="stormtrooperCtrl"> <button ng-click="selected=0">image1</button> <button ng-click="selected=1">image2</button> <button ng-click="selected=2">image3</button> <div> <img width="100" ng-src="{{images[selected]}}"/> </div> </div> </div>