web-dev-qa-db-ja.com

この単純なAngularJS ng-showが機能しないのはなぜですか？

単純なAngularJSアプリが意図したとおりに動作しない理由を理解できません。 「読み込み中...」は非表示、「完了！」 1秒後に表示されます。

html：

<div ng-app>
    <div ng-controller="TestCtrl">
        <div class="text-center" ng-show="loading">
            <h1>Loading...</h1>

    </div>
        <div class="text-center" ng-show="!loading">
            <h1>Done!</h1>

        </div>
    </div>
</div>

Javascript：

function TestCtrl($scope) {
    $scope.loading = true;
    setTimeout(function () {
        $scope.loading = false;
    }, 1000);
}
javascriptangularjsng-show
40
darktideac

angular変数を更新したことを伝える必要があります。

function TestCtrl($scope) {
    $scope.loading = true;
    setTimeout(function () {
        $scope.$apply(function(){
            $scope.loading = false;
        });
    }, 1000);
}

あるいは単に

function TestCtrl($scope, $timeout) {
    $scope.loading = true;
    $timeout(function () {
        $scope.loading = false;
    }, 1000);
}
58
Deepsy

これを行うより良い方法は、$scope.$digest();を呼び出してUIを更新することです。

12
TacoEater

apply() function tostop loadingメッセージ。

これを確認してください デモjsFiddle **。

JavaScript：

function TestCtrl($scope) {
    $scope.loading = true;
    setTimeout(function () {
        $scope.$apply(function(){
            $scope.loading = false;
        });
    }, 1000);
}

これがあなたの助けになることを願っています！

6
Jay Patel

_$timeout_を使用して、コントローラーに挿入する必要があります。

_function TestCtrl($scope, $timeout) {
    $scope.loading = true;
    $timeout(function () {
        $scope.loading = false;
    }, 1000);
}
_

フィドルデモ

編集：@Salmanが提案した$scope.apply();を削除

6
StarsSky

火災angular setTimeoutなどの別のオブジェクトへのイベントを使用する必要があります

$scope.$apply(function(){
     $scope.loading = false;
});

例えば

var loading={
     show:function(){
        $scope.loading=true
     },
     hide:function(){
        $scope.loading=false
     }
}

最良の方法で動作しない場合があります

   var loading={
         show:function(){
            $scope.$apply(function(){
               $scope.loading=true
            });
         },
         hide:function(){
            $scope.$apply(function(){
               $scope.loading=false
            });
         }
    }
4
Behnam Mohammadi

私は、ng-showをあなたが望むように評価しないで回避する方法の1つは、代わりにng-classを使用することであることを発見しました。

 <div class="mycontent" data-ng-class="{'loaded': !loading}">

この方法では、$ scope.loadingがtrueに等しくない場合、CSSクラス「loaded」が要素に追加されます。次に、cssクラスを使用してコンテンツを表示/非表示にする必要があります。

.mycontent {
    display: none;
}

.loaded {
    display: block;
}
1
Glenn Nicoll

ここでの最大の問題は、モデルとしてプリミティブを使用していることだと思います。 angularチームは、オブジェクトを使用してモデルを結び付けることをお勧めします。例：

scope.model = {};
scope.model.loading = false;

次に、あなたのhtmlで：

<div class="text-center" ng-show="model.loading">

そのようにangularは、変数が指すプリミティブの代わりに、オブジェクト内のフィールドへの参照を取得します。

0
mariogarcia