Angular JS what is current scope?

Question

Controller

function MainController($scope, $rootScope, $location, $route) {
    $scope.EditMode = false;

    $scope.Click = function () {
        $scope.EditMode = !$scope.EditMode;
    };
}

HTML

<button ng-if="!EditMode" ng-click="$parent.EditMode = !$parent.EditMode">Button1</button>
<button ng-if="!EditMode" ng-click="EditMode = !EditMode">Button2</button>
<button ng-if="!EditMode" ng-click="Click()">Button3</button>

Button1 - work

Button2 - NOT work

Button3 - Work

Why Button2 not work?

score 3 · Accepted Answer · edited May 23 '17 at 11:51

When you add the directive ng-if it create new scope. The new scope have the same values from the parent scope. That why button1 and button3 works.

Buttons2 not work because when you do EditMode = !EditMode it create new variable named EditMode in the new scope.

You have several options to fix it. The most simple one is to replace all ng-if with ng-show

Solution #1:

<button ng-show="!EditMode" ng-click="$parent.EditMode = !$parent.EditMode">Button1</button>
<button ng-show="!EditMode" ng-click="EditMode = !EditMode">Button2</button>
<button ng-show="!EditMode" ng-click="Click()">Button3</button>

Solution #2:

Make EditMode as object. And keep your ng-if This way the new scope will not override the parent scope.

function MainController($scope, $rootScope, $location, $route) {
    $scope.EditMode = {value:false};

    $scope.Click = function () {
        $scope.EditMode.value = !$scope.EditMode.value;
    };
}

<button ng-if="!EditMode.value" ng-click="EditMode.value = !EditMode.value">Button1</button>
<button ng-if="!EditMode.value" ng-click="EditMode.value = !EditMode.value">Button2</button>
<button ng-if="!EditMode.value" ng-click="Click()">Button3</button>

More info:

Solution #1:

Solution #2:

AngularJS $scope prototypal inheritance - primitive vs. objects?

Thanks! Mark as answer after 11 minutes. – Alexandr Sulimov Jul 11 '16 at 18:06 — Alexandr Sulimov, Jul 11 '16 at 18:06
Left out a more common fix which is use controllerAs – charlietfl Jul 11 '16 at 18:12 — charlietfl, Jul 11 '16 at 18:12

score 0 · Answer 2 · answered Jul 11 '16 at 18:10

0

Because an ngIf defines its own scope, which prototypically inherits from its parent scope (just like ngRepeat). So, when you change the value of a field inside an ngIf, you change it in the ngIf scope, and not in its parent scope.

answered Jul 11 '16 at 18:10

Mayur Randive

633
1
10
20

https://github.com/angular/angular.js/wiki/Understanding-Scopes read this .. It will help you to understand the scope concept in details – Mayur Randive Jul 11 '16 at 18:11

Angular JS what is current scope?

2 Answers2

Solution #1:

Solution #2:

More info:

Solution #1:

Solution #2: