为什么不工作这个简单的AngularJS NG-说明了什么？ [英] Why is this simple AngularJS ng-show not working?

问题描述

我不明白，为什么无法按照预期的工作我的简单AngularJS应用程序。 载入中...应该被隐藏，而完成！应在1秒钟后显示。

HTML

 ＆LT; D​​IV NG-应用＆GT;
    ＆LT; D​​IV NG控制器=TestCtrl＆GT;
        ＆LT; D​​IV CLASS =TEXT-中心NG秀=加载＆GT;
            ＆LT; H1＆GT;加载...＆LT; / H1＆GT;    ＆LT; / DIV＆GT;
        ＆LT;！加载DIV CLASS =TEXT-中心NG秀= GT;
            ＆LT; H1＆GT;！完成＆LT; / H1＆GT;        ＆LT; / DIV＆GT;
    ＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
 

使用Javascript：

 函数TestCtrl（$范围）{
    $ scope.loading = TRUE;
    的setTimeout（函数（）{
        $ scope.loading = FALSE;
    }，1000）;
}
 

解决方案

您需要告诉角度您更新的变种：

 函数TestCtrl（$范围）{
    $ scope.loading = TRUE;
    的setTimeout（函数（）{
        $范围。$应用（函数（）{
            $ scope.loading = FALSE;
        }）;
    }，1000）;
}
 

或只是

 函数TestCtrl（$范围，$超时）{
    $ scope.loading = TRUE;
    $超时（函数（）{
        $ scope.loading = FALSE;
    }，1000）;
}
 

I cannot figure out why my simple AngularJS app not working as intended. "Loading..." is supposed to be hidden, and "Done!" should be shown after 1 second.

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);
}

解决方案

You need to tell angular that you updated the var:

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

or just

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

这篇关于为什么不工作这个简单的AngularJS NG-说明了什么？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！