変更する$ rootScope変数の値に応じてdivを表示

Question

10秒ごとにhttpコールを行い、rootScope.mailSentがtrueの場合はdivを表示します。呼び出しはうまくいっています。

<div ng-show="{{mailSent === true}}" class="pastille" ng-cloak=""></div> 

をしかしmailSent値がtrueであるのに対し、divが表示されません：私の見解では

$interval(function(){ 
     $http.get("/api/sentMails") 
     .then(function(response) { 
      if (response.data.length>0){ 
       $rootScope.mailSent = true; 
      } 
     }); 
    }.bind($rootScope), 10000); 

を：

私のコントローラでは、私はそれを行っています。 何か不足していますか？

Answer 1

構文が間違っている、これを試してみてください。

<div ng-show="mailSent" class="pastille" ng-cloak=""></div> 

Answer 2

この

<div ng-show="mailSent" class="pastille" ng-cloak=""></div> 

NG-ショーは真または偽の値をとります試してみてください。送信されたメールに "$ rootScope.mailSent = true;"が設定されている場合。だから、NGショーは真の価値を得るでしょう。このような比較をする必要はありません。

これがうまくいくと思います。

Answer 3

あなたはこれを試してみてくださいNG-ショーで{{}}は必要ありません。多くの問題を引き起こす可能性が$ rootScopeの下に直接フィールドを使用して

<div ng-show="mailSent === true" class="pastille" ng-cloak=""></div> 

Answer 4

。例えば、ng-ifディレクティブを持つ別のdivにソリューションをラップすると、与えられたすべてのソリューションは動作しません。

仲介フィールドを使用しないようにするには、を初期化することを忘れないでください。 rootScope内にあるので、angular.runブロックで初期化します。

最後に、ng-showはパラメータなしの補間（ブラケット）として式を取る。

<div ng-show="mail.sent == true" class="pastille"></div> 
$rootScope.mail = {sent:false};// initialize this in the controller pass it to true when you have the condition met 

Answer 5

以前の回答が指摘したように、それはスコープの問題のようです。スコープに$logを添付すれば、それをテンプレートで呼び出すことができます。ここで気の利いたトリックです：

<button data-ng-click="$log.log(put your model variable here)"></button> 

あなたがテンプレートにそれを追加する場合は、あなたがそれをクリックすることができますし、その変数の内側にあるもののコンソールでログを取得します。

controllerAs構文を使用していない場合は、可変シャドーイングを避けることを強くお勧めします。コントローラを宣言するときには、$routeProviderコードまたはテンプレート内で行うことができます。

次に、あなたの参照がscopeName.mailSent

だろう次に、あなたのボタンは次のようになります。それは表現を受け入れるため

<button data-ng-click="scopeName.$log.log(scopeName.mailSent)"></button>