跨模板的角度范围混淆

Question

我最近开始使用角度和离子，听起来好像我遗漏了一些关于范围的基本内容，这应该是显而易见的，但我不明白这是什么。

我有两个离子模板/页。相应的状态属于同一个控制器，并且都显示一个列表。这些状态定义如下：

        .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');
} 

当第一个模板加载时，G1组将按预期显示。当我单击第一个模板中的按钮，该按钮调用pickGroup转到带有更新组的第二个模板时，G2组会在转换之前替换模板一号中的G1组，而第二个模板会显示出来，但会显示为G1组。当我通过back按钮返回第一个模板时，G2组就在那里了。

我原以为G2组也会出现在第二个模板中，因为我正在更新泡菜组函数中的$scope.list，但出于某种原因，它们没有出现。听起来我还不完全理解这里的范围。

感谢你帮助我更好地理解这一点。

谢谢，桑杰。

Answer 1

当你切换到状态‘app.earch’时，角将重新创建一个控制器实例，您定义的范围是新的，因此无法获得状态'app.group‘中包含的列表数据。

如果你想共享数据，你可以使用‘服务’。