Директива AngularJS не обновляет значение области даже при применении

Question

Я использую директиву для отображения div на экране только тогда, когда размер экрана меньше 600 пикселей. Проблема заключается в том, что значение области не обновляется, даже используя $apply() внутри директивы.

Это код:

function showBlock($window,$timeout) { 
    return { 
     restrict: 'A', 
     scope: true, 
     link: function(scope, element, attrs) { 
      scope.isBlock = false; 
      checkScreen(); 

      function checkScreen() { 
       var wid = $window.innerWidth; 
       if (wid <= 600) { 
        if(!scope.isBlock) { 
         $timeout(function() { 
          scope.isBlock = true; 
          scope.$apply(); 
         }, 100); 
        }; 

       } else if (wid > 600) { 
        if(scope.isBlock) { 
         $timeout(function() { 
          scope.isBlock = false; 
          scope.$apply(); 
         }, 100); 
        }; 
       }; 
      }; 
      angular.element($window).bind('resize', function(){ 
       checkScreen(); 
      }); 
     } 
    }; 
} 

HTML:

<div ng-if="isBlock" show-block> 
    //..conent to show 
</div> 
<div ng-if="!isBlock" show-block> 
    //..other conent to show 
</div> 

Примечание: Если я не использую $ таймаут я получаю ошибку

$digest already in progress

Я консольные журналы внутри, чтобы проверить, обновляет ли оно значение, а внутри директивы все работает нормально. Но изменения не идут на представление. Блок не отображается.

Answer 1

В таком случае вы должны использовать do rule, чтобы получить преимущество Prototypal Inheritance of AngularJS.

В принципе вам нужно создать объект, который будет иметь различное свойство. Как и в вашем случае, у вас может быть $scope.model = {}, а затем разместить в нем isBlock. Таким образом, когда вы находитесь внутри своей директивы, вы получите доступ к родительской области. Причина этого в том, что у вас есть scope: true, в котором говорится, что созданная в директиве прототипически унаследована от родительской области. Это означает, что все объекты ссылочного типа доступны в области вашего дочернего объекта.

Markup

<div ng-if="model.isBlock" show-block> 
    //..conent to show 
</div> 
<div ng-if="!model.isBlock" show-block> 
    //..other conent to show 
</div> 

Контроллер

app.controller('myCtrl', function($scope){ 
    //your controller code here 

    //here you can have object defined here so that it can have properties in it 
    //and child scope will get access to it. 
    $scope.model = {}; //this is must to use dot rule, 
    //instead of toggle property here you could do it from directive too 
    $scope.isBlock = false; //just for demonstration purpose 

}); 

, а затем внутри директивы, вы должны использовать scope.model.isBlock вместо scope.isBlock

Update

Как вы используете шаблон controllerAs внутри вашего кода, вам необходимо использовать scope.ag.model.isBlock. который предоставит вам доступ, чтобы получить значение переменной области видимости внутри вашей директивы.

В принципе вы можете получить значение родительского контроллера (используется шаблон controllerAs), чтобы получить доступное значение контроллера внутри дочернего. Вы можете найти объект с вашим псевдонимом контроллера внутри $scope. Как здесь, вы создали ag в качестве псевдонима контроллера, поэтому вам нужно сделать scope.ag.model, чтобы получить значение model внутри функции директивной ссылки.

ПРИМЕЧАНИЕ

Вам не нужно использовать $apply с $timeout, который может бросить ошибку $apply in progress, так что $ таймаут будет работать переваривать для вас, вам не нужно беспокоиться о том, чтобы запустить дайджеста.

Demo Here

Answer 2

Я подозреваю, что это связано с тем, что директива show-block не будет запущена, если ng-if = «isBlock» никогда не будет истинным, поэтому никогда не регистрирует событие изменения размера.

Answer 3

В моем опыте линейного кода никогда не работает хорошо с динамическими свойствами DOM, такие как окна калибровки. С кодом, который ищет размер экранов, вам нужно поместить его в какой-либо наблюдатель событий/DOM, например. в угловом я использовал бы часы $ watch, чтобы наблюдать размеры. Поэтому, чтобы исправить это, вам нужно разместить код в виде $ watch, например, ниже. Я не тестировал этот код, просто направленный. Вы можете смотреть $ window.innerWidth или вы можете смотреть $ element, например. тело зависит от вашей цели. Я говорю это, поскольку экраны будут повсюду, но если вы контролируете элемент DOM, например, тело, вам лучше управлять. также я не использую $ timeout для краткости.

// watch window width 
showBlock.$inject = ['$window']; 
function bodyOverflow($window) { 
    var isBlock = false; 
    return { 
     restrict: 'EA', 
     link: function ($scope, element, attrs) { 
      $scope.$watch($window.innerWidth, function (newWidth, oldWidth) { 
       if (newWidth !== oldWidth) { 
        return isBlock = newWidth <= 600; 
       } 
      }) 
     } 
    }; 
} 

// OR watch element width 
showBlock.$inject = []; 
function bodyOverflow() { 
    var isBlock = false; 
    return { 
     restrict: 'EA', 
     link: function ($scope, element, attrs) { 
      $scope.$watch($element, function (new, old) { 
       if (newWidth) { 
        return isBlock = newWidth[0].offsetWidth <= 600; 
       } 
      }) 
     } 
    }; 
}