ng-init 与$rootScope变量，初始化问题

ng-init with $rootScope variable, initialization issues

本文关键字：初始化 问题 变量 rootScope ng-init      更新时间：2023-09-26

我有一个根范围变量

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

我正在尝试在标记页面上初始化它 

.
.
.
<tr class="BG8" ng-if="(obj.lineItemEditableForPM)" ng-init="varToDecideDispalyofSaveButtonOn10A='true'">   
.
.
.

虽然这里的ng-if是真的，并且创建了tr，但是变量没有定义，为什么？

ng-if 此指令创建新的子作用域。 这是 DOC

因此，您可以通过在 rootScope 中创建一个对象而不是普通变量来实现这一点，然后首先 angular 将在子作用域中搜索something.varToDecideDispalyofSaveButtonOn10A，在发现子作用域中没有something.varToDecideDispalyofSaveButtonOn10A后，它将搜索父作用域中的something.varToDecideDispalyofSaveButtonOn10A。 但是如果你使用一个普通变量（当你尝试用对象时），Angular 会知道没有什么叫做varToDecideDispalyofSaveButtonOn10A并且没有搜索它在父作用域中，它将创建一个名为 varToDecideDispalyofSaveButtonOn10A 的子作用域变量 

<tr class="BG8" ng-if="(obj.lineItemEditableForPM)" ng-init="something.varToDecideDispalyofSaveButtonOn10A=true">

在控制器中

$rootScope.something = {};
$rootScope.something.varToDecideDispalyofSaveButtonOn10A =false;

或

可以通过使用以下$parent引用子作用域内的父作用域进行存档

<tr class="BG8" ng-if="(obj.lineItemEditableForPM)" ng-init="$parent.varToDecideDispalyofSaveButtonOn10A=true">

或

您可以在不使用ng-init的情况下实现此目的 

<tr class="BG8" ng-if="(obj.lineItemEditableForPM ? (varToDecideDispalyofSaveButtonOn10A = true) : false)">

在这种情况下，您将根据obj.lineItemEditableForPM的值更改varToDecideDispalyofSaveButtonOn10A的值。如果obj.lineItemEditableForPM true，则 Angular 将在子作用域中搜索varToDecideDispalyofSaveButtonOn10A，然后在父作用域中搜索。因为您不假设像上述两种情况一样初始化变量。如果obj.lineItemEditableForPM假，则只需return false而不更改varToDecideDispalyofSaveButtonOn10A的值。

这是一个演示 Plunker

角度js中的一个常见缺陷，是在作用域中使用原始变量，并尝试从其固有的作用域更改它（任何作用域都继承自$rootScope）。

这不起作用的原因是原始变量不是引用（只有对象和数组是引用），因此，继承的范围会获得一个同名的新变量。

因此，每当想要利用范围继承时，都应该使用对象（实际上始终这样做可能是一个很好的约定）：

$rootScope.SomeVars = { varToDecideDispalyofSaveButtonOn10A : false };

并在视图中

<tr class="BG8" ng-if="(obj.lineItemEditableForPM)" ng-init="SomeVars.varToDecideDispalyofSaveButtonOn10A='true'">
相关文章：