ng-if 依赖元素没有消失

Question

我遇到了以下问题：

单击按钮时，我的搜索结果 window 打开，因为 'displayResults' 设置在 'true' 上。但是当点击关闭按钮时，即使 $scope.displayResults 再次设置为 false 它也没有关闭。

html

<section id="searchResults" data-ng-if="displayResults">
    <h2>Suchergebnisse:</h2>
    <div id="closeMenuS">&#10060;</div>
    <ul data-ng-repeat="x in sItems">
       ....
    </ul>
</section>

AngularJS

         $http({
            method : "POST",
            url : "/searchFor",
            data: {item: sI, dID: searchID}
          }).then(function(response){

            if(response.data.length > 0 || response.data != 'undefined'){

                $("#sidebar").css({pointerEvents: "none"});
                $("#default").css({pointerEvents: "none"});

                $scope.displayResults = true;
                $scope.sItems = [];

                for(let i = 0; i < response.data.length; i++){
                    $scope.sItems[i] = response.data[i];
                }

                window.setTimeout(function(){
                    $("#closeMenuS").click(function(){
                        $scope.displayResults = false;

                        $("#sidebar").css({pointerEvents: "auto"});
                        $("#default").css({pointerEvents: "auto"});
                    });
                }, 30);



            }

         }, function myError(response) {

                $scope.myWelcome = response.statusText;

          });

Answer 1

如果您在 jQuery 侦听器的回调中，则需要明确应用更改。试试这个：

                window.setTimeout(function(){
                    $("#closeMenuS").click(function(){
                        $scope.displayResults = false;
                        $scope.$apply();
                        $("#sidebar").css({pointerEvents: "auto"});
                        $("#default").css({pointerEvents: "auto"});
                    });
                }, 30);

Answer 2

AngularJs 有自己的超时实现。通过使用本机 setTimeout()，您向 angular 隐藏了您正在尝试做的事情。结果是 AngularJs 不知道您的 $scope 发生了变化。

正确的方法是注入 $timeout 服务并用 $timeout 替换您的 setTimeout() 调用（为了简化，我删除了其余代码）：

angular.module("YourModule")
       .controller("YourController", ["$scope", "$timeout", YourController]);

function YourController($scope, $timeout)
{
    ...

    $scope.doSomeMagic = function()
    {
        $timeout(function()
        {
            $("#closeMenuS").click(function()
            {
                $scope.displayResults = false;

                $("#sidebar").css({pointerEvents: "auto"});
                $("#default").css({pointerEvents: "auto"});
            });
        }, 30);
    }

    ...
}

这就是 Itamar 建议的 $apply() 函数起作用的原因。您基本上是在强制 AngularJs 检测更改。但是，更好的做法是使用 AngularJs 提供的工具，并尽可能避免原生 javascript。

ng-if 依赖元素没有消失

ng-if dependent element not disappearing

angularjs

angularjs-scope