CODEWITHSUNDEEP
angularjsscopeionic-framework
Sanjay Tibrewal
Sanjay Tibrewal

Reputation: 131

Angular scope confusion across templates

I started using Angular and Ionic recently and sounds like I am missing something basic about scope that should be obvious but don't understand what that is.

I have two Ionic templates/pages. The corresponding states belong to the same controller and both display a list. The states are defined as below

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

The first template is 

<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>

And the second template is 

<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>

The controller has the following code

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

When the first template loads the G1 groups show up as expected. When I click on the button in first template that calls pickGroup to go to the second template with updated groups, the G2 groups replace G1 groups in template one before the transition and the second template shows up but with G1 groups. When I go back to the first template through the back button the G2 groups are there.

I was expecting the G2 groups to show up in second template as well since I am updating the $scope.list in the pickgroup function but for some reason they don't. Sounds like I don't fully understand the scope here.

Appreciate your helping me understand this better.

Thanks, Sanjay.

Upvotes: 1

Views: 56

Answers (1)

ssskip
ssskip

Reputation: 259

When u switch to state 'app.search', angular will re-create a instance of controller, the scope you defined is new one, so you can't get the list data which init in state 'app.group'.

if u want share data, u can use 'Service'.

Upvotes: 1

Related Questions