45

シンプルな AngularJS アプリが意図したとおりに動作しない理由がわかりません。「Loading...」は非表示のはずなのに「Done!」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);
}
4

7 に答える 7

63

var を更新したことを 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);
}
于 2014-04-05T13:19:17.863 に答える
6

apply()関数を使用してメッセージの読み込みを停止したい。

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

JavaScript:

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

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

于 2014-04-05T13:32:29.307 に答える
6

$timeoutコントローラーで使用して注入する必要があります。

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

フィドルのデモ

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

于 2014-04-05T13:18:58.067 に答える
3

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
            });
         }
    }
于 2014-08-20T06:38:23.590 に答える
1

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;
}
于 2016-08-08T00:48:04.380 に答える