CODEWITHSUNDEEP
angularjs
Ian Warburton
Ian Warburton

Reputation: 15686

Why does this state get reset?

In the following code, why $scope.text get reset when a new area is switched in? I think its value should be persisted because its defined in the top level scope.

 <div ng-controller="Ctrl">
  <select ng-model="selection" ng-options="item for item in items">
  </select>
  <hr/>
  <div ng-switch on="selection" >
    <div ng-switch-when="settings" ng-controller="Ctrl1">
        Enter val :
        <input ng-model="text" />{{text}}
      </div>
    <span ng-switch-when="home" ng-controller="Ctrl2">Home Span</span>
    <span ng-switch-default>default</span>
  </div>
</div>

Controllers:

var myApp = angular.module('myApp',[]);

function Ctrl($scope) {
  $scope.items = ['settings', 'home', 'other'];
  $scope.selection = $scope.items[0];
  $scope.text = "Enter val";
}

function Ctrl1($scope) {
  console.log('hi')
}

function Ctrl2($scope) {
  console.log('hi2')
}

http://jsfiddle.net/KDWh8/

Upvotes: 0

Views: 80

Answers (1)

Derek Ekins
Derek Ekins

Reputation: 11391

When you are working with primitive values in angular scopes, you cannot overwrite a value in a parent scope from a child scope. This is because angular uses javascript prototypal inheritance.

What you could do in this case is create an object in the parent scope, then you can update the values on that in the child scope. Because you are not overwriting the object (only properties attached to it) the references work.

"the rule of thumb is, if you use ng-model there has to be a dot somewhere." Miško Hevery

Upvotes: 1

Related Questions