ng-show、ng hideが動作しています。しかし、動作していない場合は、

Question

ng-show、ng hideが動作しています。しかしNG、このコードが動作している,,しかし、私はそれはNG-IFであることshoud必要

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

に動作しない場合。

<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

引用符を削除します。以上、偽真と== ==を削除し、より安定した条件のためのブール値を使用します。

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

JS

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

Answer 2

あなたinitExplorerでscope.widget.chartLoadedを設定しているように見えます。ただし、テンプレートはabc.chartLoadedを参照しています。それはwidget.chartLoadedでなければなりません。

Answer 3

JavaScriptのブール値は、引用符のないfalseとtrueです。 'true'は文字列とみなされ、同じものではありません。

truthy and falsyの値もあります。if(0){}は、if(false){}と同じものです。

戻るあなたの例に：'true'以来

がtruthyで、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>