클릭시 컨트롤러에서 AngularJS 변경 부분

Question

동시에 표시되는 모듈 집합이있는 대시 보드 응용 프로그램에서 작업하고 있습니다. 이 모듈에 여러 개의 '보기'를 추가하고 싶습니다. 예를 들어, Github 모듈의 첫 번째보기는 리포지토리의 목록입니다. 해당 모듈에서 저장소 링크를 클릭하면 모듈의 해당보기가 해당 Repo에 대한 모든 세부 정보를 보여주는 새 화면으로 바뀝니다.

그러나이 모듈을이 모듈에서 분리하여 다른 모듈을 동시에 사용할 수 있도록하고 싶습니다 (페이지를 전혀 전환하고 싶지는 않습니다).

내가 달성하기 위해 노력하고있어의 예는 여기에서 찾을 수 있습니다 : 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 지시어. 이렇게하면 요소의 내용을 전환하는 동시에 동일한 $scope을 유지하면서 해당 상태 사이에서 쉽게 데이터를 공유 할 수 있습니다.

여기에 업데이트 된 바이올린이 있습니다. 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 지시문을 사용할 때의 장점은 일관된 방식으로 위젯에 여러 상태를 쉽게 추가 할 수 있다는 것입니다.

그에 따라 두 번째 모듈을 수정할 수 있습니다.