Question

我有一个angularjs错误。我认为这是常见的角度错误。页面刷新后，您将在编译之前看到{{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没有错误。我不知道是否可以链接我的网站，there is the code with the bug。（单击输入字段）

我希望有人可以帮助我，并且知道这种错误......

Answer 1

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

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

Answer 2

对于日期时间容器css类（uhrzeitContainer）上的简单解决方案，请将其display属性设置为none。

ngShow指令与display属性一起使用，默认情况下不可见，可以解决你的问题，不用大惊小怪:)

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

2 个答案: