ng-show，ng hide正在运行。但是如果不起作用

Question

ng-show，ng hide 正在运行。但 ng如果不起作用

 <svg  ng-show="abc.chartLoaded" ></svg>
 <div class="loader" ng-hide="abc.chartLoaded"></div>

此代码正在运行，但我需要它在ng-if。

  <svg  ng-if="abc.chartLoaded == 'true'" ></svg>
     <div class="loader" ng-if="abc.chartLoaded == 'false'></div>

此代码无效!!! 我的js代码是：

  scope.initExplorer = function() {
    scope.widget.chartLoaded='true';}

任何帮助请!!!。

Answer 1

删除引号。或者更好的是，删除== true和== false并使用布尔值来获得更稳定的条件：

<svg  ng-if="abc.chartLoaded" ></svg>
<div class="loader" ng-if="!abc.chartLoaded"></div>

JS

scope.initExplorer = function() {
scope.widget.chartLoaded=true;}

Answer 2

您似乎在scope.widget.chartLoaded中设置了initExplorer;但是，您的模板正在引用abc.chartLoaded。它应该是widget.chartLoaded。

Answer 3

Javascript中的布尔值为false和true，不带引号。 'true'被认为是一个字符串，它不是一回事。

请注意，还有truthy and falsy个值：if(0){}与if(false){}相同。

回到您的示例：

由于'true'是真实的，ng-show="abc.chartLoaded"和ng-if="abc.chartLoaded"将解析为true，这将显示您的元素。

我建议使用false和true以避免混淆。

将属性附加到scope对象时，它将在您的html模板中以相同名称显示。

在你的控制器中试试这个：

scope.widget = {}; //you need to initialize widget if not done elsewhere

scope.initExplorer = function() {
    scope.widget.chartLoaded = true;
}

在你的HTML中：

<svg  ng-if="widget.chartLoaded" ></svg>