왜 이 단순한 Angular는JS ng-show가 안 돼요?

왜 이 단순한 Angular는JS ng-show가 안 돼요?

왜 내 단순한 앵글이JS 앱이 제대로 작동하지 않습니다."로드 중..."는 숨겨야 하며 1초 후에 "Done!"이 표시됩니다.

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

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

더 좋은 방법은 전화하는 것이다.$scope.$digest();UI를 업데이트하다

를 사용해야 합니다.$timeout컨트롤러에 주입합니다.

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

바이올린 데모

편집: 삭제됨$scope.apply();@Salman의 제안대로

기능을 사용하여 메시지 로드를 중지하려고 합니다.

이 데모 jsFiddle**을 확인하십시오.

JavaScript:

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

이게 도움이 됐으면 좋겠네요!

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

원하는 대로 평가하지 않고 ng-show를 처리하는 방법 중 하나는 ng-class를 사용하는 것입니다.

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

이렇게 하면 $scope.loading이 true와 같지 않은 경우 css 클래스 "loaded"가 요소에 추가됩니다.css 클래스를 사용하여 콘텐츠를 표시하거나 숨기려면 a가 필요합니다.

.mycontent {
    display: none;
}

.loaded {
    display: block;
}

여기서 가장 큰 문제는 당신이 원시적인 것을 모델로 삼고 있다는 것입니다.각도 팀에서는 모형을 연결할 개체를 사용하는 것이 좋습니다.예를 들어 다음과 같습니다.

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

다음으로 html에서 다음을 수행합니다.

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

이렇게 하면 각도가 변수로 가리켜지는 원시 대신 개체 내부의 필드를 참조합니다.

언급URL : https://stackoverflow.com/questions/22881374/why-is-this-simple-angularjs-ng-show-not-working