javascript - angularjs ng-show div 在页面刷新后打开一秒钟

Question

我有一个 angularjs 错误。我认为这是常见的 Angular 错误。刷新页面后，您将看到编译前的 {{variable}}。

或者您看到应该在变量为 true 后显示的 div。这是我最大的问题。我有一个时间选择器。该功能已被禁用，并且仅在用户单击按钮后才会弹出。但当我刷新网站时，它会弹出一段时间。 这是两个屏幕截图。

刷新页面后会弹出这个

这是点击按钮后的时间选择器

这是我的代码:

HTML 部分

<div ng-controller="MyCtrl">
  Hello, {{hello}}!

  <button ng-click="openTimepicker()">
  Open Timepicker
  </button>

  <div ng-show="uhrzeitanzeigen" class="uhrzeitContainer menu" click-outside="closeThis()" outside-if-not="timepicker">
            <div class="uhrzeitwaehlenContainer">
                Uhrzeit wählen:
                <p>{{stunden}}:{{minuten}}</p>
            </div>
            <div class="uhrzeitWrapper">

                <div class="uhrzeitStunden">
                    <div class="stunde" ng-class="{'clickedBorder': getStunde($index)}" ng-repeat="i in getNumber(number) track by $index" ng-click="clickStunde($index)"><span>{{$index+1}}</span></div>

                </div>

                <div class="uhrzeitMinuten">
                    <div class="minute" ng-class="{'clickedBorder': getMinute($index)}" ng-repeat="i in minutenAnzeige track by $index" ng-click="clickMinute($index)"><span>{{i}}</span></div>
                </div>
            </div>
            <div class="buttonContainer">
                <a class="uhrzeitButton" href="">Abbrechen</a>
                <a class="uhrzeitButton" href="">Ok</a>
            </div>
        </div>

</div>

AngularJS 代码

var myApp = angular.module('myApp',[]);

//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});

myApp.controller('MyCtrl', function($scope) {
    $scope.hello = "Welcome =>";

  $scope.uhrzeitanzeigen = false;
    $scope.stunden;
    $scope.minuten;

    $scope.awesome = true;

    $scope.number = 24;
    $scope.getNumber = function(num) {
        return new Array(num);   
}

    $scope.openTimepicker = function() {
        $scope.uhrzeitanzeigen = !$scope.uhrzeitanzeigen;
    }

    $scope.closeThis = function() {
        $scope.uhrzeitanzeigen = !$scope.uhrzeitanzeigen;
    }

    /* Methoden für die STUNDEN */

    $scope.stundenArray = [];
    $scope.clickStunde = function(index) {
        for(var i = 0; i < $scope.number; i++) {
            $scope.stundenArray[i] = false;
        }
        $scope.stundenArray[index] = true;
        $scope.stunden = index+1;
    }

    $scope.getStunde = function(index) {
        console.log("get stunde");
        return $scope.stundenArray[index];
    }

    /* Methoden für die Minuten */
    $scope.minutenArray = [];
    $scope.minutenAnzeige = ['00', '15', '30', '45'];

    $scope.clickMinute = function(index) {
        console.log("click minute " + index);
        for(var i = 0; i < 4; i++) {
            $scope.minutenArray[i] = false;
        }
        $scope.minutenArray[index] = true;
        $scope.minuten = $scope.minutenAnzeige[index];
    }

    $scope.testvar = true;

    $scope.getMinute = function(index) {
        console.log("get minute");
        console.log($scope.minutenArray);
        console.log($scope.minutenArray[index-1]);
        return $scope.minutenArray[index];
    }

})

CSS代码

.uhrzeitContainer {
    background-color: white;
    position: absolute;
    top: 20%;
    left: 25%;
    width: 50%;
    -webkit-box-shadow: 0px 7px 18px -5px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 7px 18px -5px rgba(0,0,0,0.75);
    box-shadow: 0px 7px 18px -5px rgba(0,0,0,0.75);
}

.uhrzeitwaehlenContainer {
    background-color: #3F51B5;
    color: #E8EAF6;
    padding: 5%;
    text-align: center;
    font-size: 25px;    
    margin-bottom: 10px;
}

.uhrzeitWrapper {
    display:block;
    overflow:auto;
}



.uhrzeitStunden {
    background-color: white;
    color: black;
    width: 60%;
    float: left;
    border-right: 1px solid black;
}

.uhrzeitMinuten {
    background-color: white;
    color: black;
    width: 40%;
    float: left;
}

.stunde, .minute {
    display: inline-block;
    padding: 20px 22px 20px 20px;
    text-align: center;
}

.clickedBorder {
    background-color: #3F51B5;
    color: white;
}

.buttonContainer {
    float: right;
}

a.uhrzeitButton {
    color: #3F51B5;
    text-decoration: none;
    margin: 5px 15px;
    padding-bottom: 10px;
}

这是一个jsfiddle with the code 。但是jsfiddle没有bug。我不知道是否可以链接我的网站，但是there is the code with the bug 。 (点击输入字段)

我希望有人能帮助我并知道这种错误......

Answer 1

使用ng-cloak，以便在数据完全加载后应用您的指令。它与window.onload相同。即一旦窗口加载，您的函数就会被调用。

<div ng-cloak ng-show="someValue" >
</div>