нг-если зависимый элемент не исчезает - PullRequest
Новая
       8

нг-если зависимый элемент не исчезает

0 голосов
/ 29 января 2019

У меня возникла следующая проблема:

При нажатии кнопки мое окно searchResults открывается из-за того, что для 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;

          });

Ответы [ 2 ]

0 голосов
/ 20 февраля 2019

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);
    }

    ...
}

Вот почему работает функция $apply(), предложенная Итамаром.Вы в основном заставляете AngularJ обнаруживать изменения.Однако лучше всего использовать инструменты, предоставляемые AngularJs, и избегать нативного JavaScript, когда это возможно.

0 голосов
/ 29 января 2019

Если вы выполняете обратный вызов в слушателе jQuery, вам нужно явно применить изменение.Попробуйте это: 

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