Question

我需要在我的HTML中更新ng-if：

<div id="shyBoxII"  ng-if="robot.robot" ng-class="background">
    <div class="row"><i class="fa fa-user-plus"></i></div>
    <div class="row"><i class="fa fa-book"></i></div>
    <div class="row"><i class="fa fa-video-camera"></i></div>
    <div class="row"><i class="fa fa-volume-up"></i></div>
    </div>

但是在我的控制器中，我控制了日志robot.robot，得到它true并且仍然没有显示#shyBoxII。是什么给了什么？

  $scope.pinActiveSection = function ($event,section) {
            var $element = $(".table-hover tr."+section+"");
            console.log($event,section);
            if($element.children(":first").hasClass("unlock")){
            $(".table-hover tr:not(."+section+")").fadeOut( "slow", function() {
            $(this).remove();
            $element.parent().parent().parent().css("top", "10%");
            $element.parent().parent().parent().css("padding", "0%");
            $scope.activeSection.activeSection = section;
            $scope.robot.robot = true;
            console.log($scope.robot.robot);
            if($scope.activeSection == "I")
            {
                $scope.background.push("I");
                $scope.background.push("show");
            }
            });
            }
            else{
                $.fn.extend({
            animateCss: function (animationName) {
                var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
                $(this).addClass('animated ' + animationName).one(animationEnd, function() {
                    $(this).removeClass('animated ' + animationName);
                });
            }
        });
        $element.children(":first").animateCss('bounce');
            }
        };

要清楚，$scope.pinActiveSection正在运行，我看到$scope.robot.robot为true的控制台日志，所以我不明白为什么我的视图不会更新。如果我在$scope.robot.robot块中向上推if，那么它可以正常工作，但我想将它作为fadeOut回调的一部分。请帮忙！

编辑：如果我连续两次运行pinActiveSelection，我会在第二次运行后看到#shyBoxII。这是否能给出第一次出现问题的任何线索？

Answer 1

请将此代码添加到功能的末尾＆＃39; pinActiveSection＆＃39;

$scope.$apply();或$scope.$digest();

Answer 2

您是否尝试过使用ng-show？

<div id="shyBoxII"  ng-show="robot.robot" ng-class="background"></div>

Answer 3

问题可能是Angular不知道$scope.robot.robot的值是第一次更新，因为没有触发$digest()来将旧值与新值进行比较。尝试使用：

$timeout (function () {
    $scope.robot.robot = true;
})

或使用$scope.$evalAsync()代替$timeout()。

Ng-如果不在视图中应用

3 个答案: