ClickでコントローラのAngularJS changeを部分的に変更する

Question

私はダッシュボードアプリケーションで、同時に一連のモジュールを表示しています。これらのモジュールに複数の「ビュー」を追加したいと思います。たとえば、Githubモジュールの最初のビューは、リポジトリのリストです。そのモジュールのリポジトリリンクをクリックすると、モジュール内のそのビューは、そのレポに関するすべての詳細情報を示す新しい画面に置き換えられます。

しかし、私はこのモジュールでこのビューを分離して、他のモジュールを同時に使用することができます（私はページをまったく入れたくない）。

私が達成しようとしているものの例は、ここで見つけることができます：この例ではhttp://jsfiddle.net/5LgCZ/

を、あなたは果物や車をクリックして、新しいビューにそのモジュールの中で述べた項目に関する詳細な情報を得るでしょう。 （現在はアラートを出しています）。

これは私がこれまで持っているものですが、私は限りコントローラやビューが行くように、これを構造化してアプローチする方法は考えていません：助けることができるようになります誰のために事前に

<div ng-app="app"> 
    <div class="module" ng-controller="FruitCtrl"> 
     <h1>Fruit Module</h1> 
     <ul> 
      <li ng-repeat="fruit in fruits"><a href="#" ng-click="showDetail(fruit)">{{fruit}}</a></li> 
     </ul> 
    </div> 
    <div class="module" ng-controller="CarCtrl"> 
     <h1>Car Module</h1> 
     <ul> 
      <li ng-repeat="car in cars"><a href="#" ng-click="showDetail(car)">{{car}}</a></li> 
     </ul> 
    </div> 
</div> 

感謝を。

Answer 1

new viewが意味することは完全にはわかりませんが、おそらくこれを行うにはいくつかの方法がありますが、最も簡単なもの（私の意見では）を使い始めるためには、あなたが選択に基づいて/非表示を示し、各モジュールのために：あなたは同じHTML要素内に表示される状態のカップルをwan't場合

<div class="module" ng-controller="FruitCtrl"> 
    <h1>Fruit Module</h1> 
    <ul ng-show='!fruitSelected'> 
     <li ng-repeat="fruit in fruits"><a href="#" ng-click="showDetail(fruit)">{{fruit}}</a></li> 
    </ul> 
    <div class="details" ng-show="fruitSelected">{{fruitSelected}}</div> 
</div> 

function FruitCtrl($scope) { 
    $scope.fruits = ['Banana', 'Orange', 'Apple']; 
    $scope.fruitSelected = false; 
    $scope.showDetail = function (fruit) { 
     $scope.fruitSelected = fruit; 
    } 
} 

Answer 2

、あなたは内蔵のng-switchディレクティブを活用することができます。これにより、要素の内容を切り替えながら同じ内容を維持しながら、それらの状態間で簡単にデータを共有できるようになります。

ここにあなたの更新されたフィドルです：http://jsfiddle.net/dVFeN/以下の説明になります。

あなたの例の場合、それは次のようになります。

HTML

<div class="module" ng-controller="FruitCtrl"> 
    <h1>Fruit Module</h1> 
    <div ng-switch="moduleState"> 
     <div ng-switch-when="list"> 
      <ul> 
       <li ng-repeat="fruit in fruits"><a href="#" ng-click="showDetail(fruit)">{{fruit}}</a></li> 
      </ul> 
     </div> 
     <div ng-switch-when="details"> 
      <p>Details for {{ selectedFruit }}</p> 
      <a href="#" ng-click="showList()">Back to list</a> 
     </div> 
    </div> 
</div> 

moduleStateと呼ばれる余分な変数は、ウィジェットの現在の状態を定義します。 ng-switch指示のおかげで、外側の内容divは、ng-switch-when属性に渡された値に基づいて内部要素を自動的に切り替えます。

JS

function FruitCtrl($scope) 
{ 
    $scope.moduleState = 'list'; 

    $scope.fruits = ['Banana', 'Orange', 'Apple']; 

    $scope.showDetail = function(fruit) 
    { 
     $scope.selectedFruit = fruit; 

     $scope.moduleState = 'details'; 
    }; 

    $scope.showList = function() 
    { 
     $scope.moduleState = 'list'; 
    }; 
} 

あなたがここにしなければならないすべては、自動的に必要なウィジェットビューを示しmoduleState変数の値を変更することです。さらに、導入されたselectedFruit変数は、詳細ビューで動作する項目の参照を保持します。

ng-switchディレクティブを使用する利点は、ウィジェットに任意の数の状態を一貫性のある方法で簡単に追加できることです。

これに応じて、2番目のモジュールを変更することができます。