コントローラのプリミティブ値へのバインド

Question

コントローラのスコープのブール変数にバインドして、ロードするアニメーションを表示するかどうかを指定しようとしています。ただし、次のコードは機能しません。 $timeout内の関数は実行されますが、ビューは更新されません。

クロムエクステンションエクステンションを使用してスコープを検査すると、ctrl.loadingはtrueです。

参照型とは対照的に、ブール値がJavaScriptの値型であるためですか？

私の推測では、ビューは文字通りtrueにバインドされており、変更されるブール値の場所ではありません。

ビューを変数にバインドするにはどうしたらいいですか？値にではなく、変数が最初にありますか？

コントローラ：テンプレート

function TestController($scope,$timeout){ 
    "use strict"; 

    var loading=true; 

    $timeout(function(){ 
     loading=false; 
    }, 1000); 

    return { 
     loading:loading 
    } 

} 

：

<div> 
    <h1 ng-show="ctrl.loading">Loading</h1> 
    <h1 ng-hide="ctrl.loading">Not Loading</h1> 
</div> 

abovecodeは一例であり、実際に私はwqasが返さGETリクエストの後に値を設定します。

$http.get().then(function() { 
    loading=false; 
}, function() { 
    loading=false; 
}) 

でも効果は同じです。

Answer 1

loading変数を誤ってバインドしています。その変数loadingを$scopeまたはthis変数に登録する必要があります。以下の実施例を参照してください。

var app = angular.module("sa", []); 
 

 
app.controller("TestController", TestController); 
 

 
function TestController($scope, $timeout) { 
 
    "use strict"; 
 
    var vm = this; 
 

 
    vm.loading = true; 
 

 
    $timeout(function() { 
 
    vm.loading = false; 
 
    }, 2000); 
 

 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 

 
<div ng-app="sa" ng-controller="TestController as ctrl"> 
 
    <h1 ng-show="ctrl.loading">Loading</h1> 
 
    <h1 ng-hide="ctrl.loading">Not Loading</h1> 
 
</div>

また、コントローラに戻りブロックは役に立ちません。

編集

さて、私はあなたの質問を理解しています。私がコントローラから戻ってくるこの機能を初めて見ました。調査の30分後に、私は、あなたは、プリミティブ型がJavascriptで参照渡しされることを期待できないことを知りました。オブジェクトを使用する必要があります。

要点を取得するために、スコープの継承の問題を参照してください：https://github.com/angular/angular.js/wiki/Understanding-Scopes

この問題を解決するには、以下のようにコードを変更することができます。

var app = angular.module("sa", []); 
 

 
app.controller("TestController", TestController); 
 

 
function TestController($scope, $timeout) { 
 
    "use strict"; 
 
    var myData = {}; 
 

 
    myData.loading = true; 
 

 
    $timeout(function() { 
 
    myData.loading = false; 
 
    }, 2000); 
 

 
    return { 
 
    myData: myData 
 
    }; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
<div ng-app="sa" ng-controller="TestController as ctrl"> 
 
    <h1 ng-show="ctrl.myData.loading">Loading</h1> 
 
    <h1 ng-hide="ctrl.myData.loading">Not Loading</h1> 
 
</div>