UI 뷰 내가 catalog.html 각 애플리케이션이 제어기

Question

의 값을 갱신하지 않는 경우와 동일한 컨트롤러 categoryCtrl 하에서 2 UI 뷰하고 :

catalog.html

<!-- SEARCH -->   
<div ui-view="search-catalog"></div> 
<!-- CONTENT -->    
<div ui-view="result"></div> 

내가 search-catalog 뭔가를 변경의 때

.state('catalog', { 
url: '/catalog', 
views: { 
    'search-catalog': { 
     templateUrl: 'views/search-catalog.html', 
     controller: 'categoryCtrl' 
    }, 
    'result': { 
     templateUrl: 'views/result.html', 
     controller: 'categoryCtrl' 
    }, 

을 app.js categoryCtrl 내부의 변경 사항은 result에 반영되지 않습니다. 특히, 배열 $ scope.items 및 ng-repeat가 값을 업데이트하지 않습니다.

Answer 1

으로는 결과 범위에 반영되지 않습니다 검색 카탈로그 범위에 $ scope.items 개체를 수정하여 경우 categoryCtrl는, 두 개의 분리 된 범위와 중복되어있다. 이 경우

.state('catalog', { 
    url: '/catalog', 
    views: { 
     '': { 
     templateUrl: 'catalog.html', 
     controller: 'catalogCtrl' 
     }, 

     'search-catalog@catalog': { 
     templateUrl: 'views/search-catalog.html'    
     }, 

     'result@catalog': { 
     templateUrl: 'views/result.html'    
     } 
    } 

.controller("catalogCtrl", function($scope) { 
    $scope.items = ["item1", "item2", "item3"]; 
    }); 

중첩 된 뷰가 동일한 컨트롤러에 바인딩됩니다 상위 범위 (카탈로그)에 논리를 이동 괜찮다면 당신은 다음과 같은 작업을 수행 할 수 /범위. 중첩 된 뷰와 부모 사이의 로직을 분리하려면 서비스 나 팩토리 같은 싱글 톤을 사용하여 중첩 뷰에 삽입해야합니다.

Answer 2

AngularJS는 컨트롤러의 인스턴스를 두 개 만들므로 두 컨트롤러 모두 범위가 분리되어 있습니다. 둘 중 하나에서 변경 한 사항은 다른 하나에 반영되지 않습니다.

원하는 것을 얻기위한 여러 가지 방법이 있습니다. 부모 컨트롤러에서 공유해야하는 코드를 배치하거나 두 컨트롤러간에 데이터를 공유하는 팩터 리 (싱글 톤)를 만들 수 있습니다.

이벤트 (브로드 캐스트, 방출, 켜기)를 사용하여 컨트롤러와 통신 할 수도 있습니다.