Question

我遇到以下问题：

单击按钮时，由于“ displayResults”设置为“ true”，因此将打开searchResults窗口。但是，当单击关闭按钮时，即使再次将Switch设置为$scope.displayResults，它也不会关闭。

html

false

AngularJS

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

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()，您可以从角度隐藏尝试执行的操作。结果是AngularJs不知道您的$scope已更改。

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

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从属元素不消失

2 个答案: