Ng-init with $ rootScope variable, initialization problems
I have a root variable
//we keep it false here, on HTML page if any line item is displayed in edittable form,it will be initialized to True
$rootScope.varToDecideDispalyofSaveButtonOn10A =false;
I am trying to initialize it in a markup page
.
.
.
<tr class="BG8" ng-if="(obj.lineItemEditableForPM)" ng-init="varToDecideDispalyofSaveButtonOn10A='true'">
.
.
.
Although ng-if is true here and tr is created, but the variable is undefined, Why?
source to share
ng-if
This directive creates a new child object. here doc
so that you can achieve this by creating an object in rootScope instead of a simple variable, then angular will first search something.varToDecideDispalyofSaveButtonOn10A
in the scope of child objects, and after searching in the content area, something.varToDecideDispalyofSaveButtonOn10A
it will not find something.varToDecideDispalyofSaveButtonOn10A
in the parent scope. but if you are using a regular variable (as you tried to exclude the object) angular will know that nothing is called varToDecideDispalyofSaveButtonOn10A
and without looking in the parent scope it will create the child scope variablevarToDecideDispalyofSaveButtonOn10A
<tr class="BG8" ng-if="(obj.lineItemEditableForPM)" ng-init="something.varToDecideDispalyofSaveButtonOn10A=true">
in the controller
$rootScope.something = {};
$rootScope.something.varToDecideDispalyofSaveButtonOn10A =false;
OR
you can archive by referencing the parent area inside the area with $parent
as shown below
<tr class="BG8" ng-if="(obj.lineItemEditableForPM)" ng-init="$parent.varToDecideDispalyofSaveButtonOn10A=true">
OR
you can achieve this without using ng-init
<tr class="BG8" ng-if="(obj.lineItemEditableForPM ? (varToDecideDispalyofSaveButtonOn10A = true) : false)">
in this case, you are going to change the value varToDecideDispalyofSaveButtonOn10A
to match the value obj.lineItemEditableForPM
. if obj.lineItemEditableForPM
true then angular will search varToDecideDispalyofSaveButtonOn10A
in the child area and then in the parent field. because you are not intending to initialize a variable as described above in two cases. if obj.lineItemEditableForPM
false , then just return false
without changing the value varToDecideDispalyofSaveButtonOn10A
.
Here is Demo Plunker
source to share
a common mistake in angular js, is using primitive variables in scope and trying to change it from the scope inherited from it (any scope inherits from $ rootScope).
the reason this doesn't work is a primitive variable and not a reference (only objects and arrays are references) and so the inherited scope gets a new variable with the same name.
so you should use the object whenever you want to take advantage of scope inheritance (it might actually be a good convention):
$rootScope.SomeVars = { varToDecideDispalyofSaveButtonOn10A : false };
and in the view
<tr class="BG8" ng-if="(obj.lineItemEditableForPM)" ng-init="SomeVars.varToDecideDispalyofSaveButtonOn10A='true'">
source to share