私の角度コントローラーでui-routerのui-viewを確認してください。

Question

私はangularjsでui-routerを使用しています。ビューの内容に応じてイメージを表示するビューのテンプレートを作成したいと思います。ここに私の例の状態があります。

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

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

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

私のコントローラは、テンプレートはすべて同じだけの画像は、それがにロードされ表示によって異なりますです、この

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


}]); 

のように見えます。現在、私は各ビューの新しいコントローラを追加し、それに基づいてイメージをロードします。しかし、私はただ1つのコントローラーでこれを行うことができるはずであり、コントローラーはそのビューが何であるかを検出できるはずです。私はあなたが状態を検出することができますが、私はより深く行き、視野を得ることを望んでいます。

すべてのアイデア？

Answer 1

あなたは、このように現在の状態configuratinのオブジェクトにアクセスすることができます。詳細については

$state.current

あなたがあたりとしてあなたのコントローラに$viewContentLoaded機能を聞くことができる$state

Answer 2

を見てみましょう例えば、

.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

テンプレート内の画像の状態だけを変更する必要はありません。スコープ変数で作ることができます。

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>