Угловая область путаницы в шаблонах

Question

Недавно я начал использовать Angular and Ionic, и мне кажется, что я пропускаю что-то основное в области видимости, которое должно быть очевидно, но не понимает, что это такое.

У меня есть два ионных шаблона/страницы. Соответствующие состояния принадлежат одному контроллеру, и оба отображают список. Состояния определяются как ниже

 .state('app.group', { 
       url: '/group', 
       views: { 
       'menuContent':{ 
        templateUrl: 'templates/group.html', 
        controller: 'GroupController',      
       } 
       }, 
       onEnter: function($){ 
        console.log("Entered Group State"); 
       } 
     })    
     .state('app.search', { 
       url: '/pickGroup', 
       views: { 
       'menuContent':{ 
        templateUrl: 'templates/groups/pickGroup.html', 
        controller: 'GroupController'     } 
       }, 
       onEnter: function(){ 
        console.log("Entered Pick Group State"); 
       } 
     }) 

Первый шаблон

<ion-view title="My Groups"> 
    <ion-nav-buttons side="left"> 
     <button menu-toggle="left" class="button button-icon icon ion-navicon"></button> 
    </ion-nav-buttons> 
    <ion-nav-buttons side="right"> 
     <button class="right button button-icon icon ion-plus" ng-click="pickGroup()"></button> 
    </ion-nav-buttons> 
    <ion-content> 
     <div class="list card"> 
      <span>My Group Names</span> 
      <div ng-repeat="item in list" class="item"> 
       {{item.name}} 
      </div> 
     </div> 
    </ion-content> 
</ion-view> 

И второй шаблон

<ion-view title="Pick Groups"> 
    <ion-nav-buttons side="secondary"> 
     <button class="right button button-positive" ng-click="gotoCreateGroup()">Create Group</button> 
    </ion-nav-buttons> 
    <ion-content has-header="true"> 
     <span>In Pick Group</span> 
     <div class="list card"> 
      <span>Groups In My Viscinity </span> 
      <input type="text" ng-model="searchTxt.name" placeholder="Enter Group Name to Search"> 
      <div ng-repeat="item in list | filter:searchTxt" class="item"> 
       {{item.name}} 
      </div> 
     </div> 
    </ion-content> 
</ion-view> 

Контроллер имеет следующий код

$scope.list = [ 
    {name:"G1-1"}, 
    {name:"G1-2"}, 
    {name:"G1-3"} 
    ]; 
$scope.pickGroup = function(){ 
    $scope.list = [ {name:"G2-1"}, 
    {name:"G2-2"}, 
    {name:"G2-3"} 
    ]; 
    $location.path("/app/pickGroup"); 
    console.log('PickGroup called'); 
} 

При первая templa te загружает группы G1, как и ожидалось. Когда я нажимаю кнопку в первом шаблоне, который вызывает pickGroup для перехода ко второму шаблону с обновленными группами, группы G2 заменяют группы G1 в шаблоне один перед переходом, а второй отображается, но с группами G1. Когда я вернусь к первому шаблону через кнопку «Назад», появятся группы G2.

Я ожидал, что группы G2 появятся во втором шаблоне, так как я обновляю $ scope.list в функции pickgroup, но по какой-то причине они этого не делают. Похоже, я не совсем понимаю эту область.

Цените свою помощь, чтобы я понял это лучше.

Thanks, Sanjay.

Answer 1

Когда u переключится в состояние «app.search», угловая заново создаст экземпляр контроллера, область, которую вы определили, является новой, поэтому вы не можете получить данные списка, которые инициализируются в состоянии «app.group» ».

Если вы хотите поделиться данными, вы можете использовать «Сервис».