angularjs scope hierarchy or why can't i see the a scope variable?

Question

probably a rocky question but nonetheless, i'd like to understand the reason for that.

I have an input field like so:

<div>
    <label class="col-xs-2" for="selectedJdeEsu">{{"JDE.jde_wizard.esu_name" | translate}}</label>
    <input ng-model="selectedEsu" type="text/>
    <div class = "btn wizard-next btn-primary" ng-click="addCurrent(selectedEsu)">
        <i class="fa fa-plus-circle" aria-hidden="true" ></i>
        add
    </div>
    <div ng-show="esuNameErr" style="color: red">
        {{esuNameErr}}
    </div>
</div>

and angularJS like so:

    $scope.addCurrent = function(curr){
        var found = false;

        for(var i = 0 ; i < $scope.jdeEsus.length ; i++){
            if($scope.jdeEsus[i].esuName === $scope.selectedEsu){
                $scope.selectedEsuList.push($scope.jdeEsus[i]);
                $scope.selectedEsu = '';
                $scope.esuNameErr = null;
                found = true;
                break;
            }
        }

        if(found == false && $scope.selectedEsu){
            $scope.esuNameErr = $filter('translate')('JDE.jde_wizard.esu_name_err')
        }
    };

$scope.jdeEsus is an array of objects. now my problem is that while in the loop $scope.selectedEsu is undefined, while curr gets the right value, even though it comes from the same source.

I want to know why?

@Rasalom can't since the code is much much bigger then this parts... — No Idea For Name, Dec 23 '14 at 10:18
yes. how this `$scope.jdeEsus.length` executes if you don't have `$scope.jdeEsus` — Kalhan.Toress, Dec 23 '14 at 10:18
@KalhanoToressPamuditha o, sry, though you meant selectedEsu. $scope.jdeEsus is initiated from DB, but for the example it can be a static array... — No Idea For Name, Dec 23 '14 at 10:19
@KalhanoToressPamuditha the loop simply finish without finding the element in the array... no other error — No Idea For Name, Dec 23 '14 at 10:27
did u check `console.log($scope.jdeEsus[i].esuName)` inside the `for loop` before the if ? — Kalhan.Toress, Dec 23 '14 at 10:36
@KalhanoToressPamuditha depend in the iteration, but it's "mv1..." — No Idea For Name, Dec 23 '14 at 11:28

score 1 · Accepted Answer · edited May 23 '17 at 12:12

This is linked to scope inheritance (Javascript, AngularJS)

selectedEsu is defined in a scope linked to either an ng-if, or an other Angular directive (this scope is a son of your Controller scope), but the parent Scope : the Controller one, don't know this field.

You can found more explanations in Question such as : What are the nuances of scope prototypal / prototypical inheritance in AngularJS?

angularjs scope hierarchy or why can't i see the a scope variable?

1 Answers1