Странное поведение при мониторинге класса по угловой директиве внутри этой директивы

Question

Странное поведение при мониторинге класса по угловой директиве внутри этой директивы

0

Я пытаюсь контролировать, является ли конкретный класс в данный момент элементом с моей директивой Angular. Переключение переменной $ scope, которая добавляет или удаляет этот класс, затем запускает директиву для обновления нескольких вещей.

Однако я вижу, что первый переключатель не принимает, а затем последует. Поэтому обновления не синхронизируются. Здесь приведен упрощенный пример, в котором используется решение Monitor для изменения класса на элементе в директиве AngularJS. Что происходит здесь, и как я могу заставить изменение класса оставаться в синхронизации внутри директивы? Большое спасибо!

Пример CodePen

HTML:

<div ng-app="myApp" ng-controller="myCtrl">
  <label>
    <input type="checkbox" ng-model="compact" /> Compactify
  </label>
  <div>Compactify is set to: {{compact}}</div>
  <div firefly class="crewList" ng-class="{compact: compact}"></div>
</div>

JS:

var app = angular.module('myApp', []);

app.controller('myCtrl', ['$scope', function($scope) {
  $scope.compact = false;
}]);

app.directive('firefly', [function() {
  return {
    restrict: 'AE',
    template: '<ul ng-class="{compact: compacted}"><li>Capt. Mal</li><li>Zoe</li><li>Wash</li><li>Kaylee</li><li>Book</li><li>Inara</li><li>Jayne</li><li>Simon</li><li>Spoilers, sweetie!</li></ul>',
    link: function(scope, element, attrs) {
      scope.insideCompactor = function() {
        scope.compacted = element.hasClass('compact');
      };
      scope.insideCompactor();
      scope.$watch(function() {return element.attr('class');}, function(newValue) {
        scope.insideCompactor();
      });
    }
  };
}]);

CSS:

.crewList {font-size: 2rem;}
.crewList UL.compact {font-size: 1rem;}

ОБНОВЛЕНИЕ Пока я не понял, как это сделать, я выяснил немного больше о проблеме. Как часть цикла дайджеста, $ watch внутри директивы, похоже, срабатывает, прежде чем класс фактически применяется к самому элементу. Следовательно, переменная области действия директивы выходит из синхронизации с тем, что на самом деле является элементом.

Scott McD. 28 июнь 2015, в 01:34

Источник

Теги:

javascript

angularjs

1 ответ

Ещё вопросы

dmullings · Accepted Answer · 2015-07-06T20-16-00.000Z

Ручка рабочего кода

Вы можете попробовать просто передать значение модели директиве. Я удалил директиву ng-class и заменил его атрибутом class-model чтобы передать данные в директиву.

<div firefly class="crewList" class-model="compact"></div>

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

app.directive('firefly', [function() {
  return {
    restrict: 'AE',
    template: '<ul ng-class="{compact: compacted}"><li>Capt. Mal</li><li>Zoe</li><li>Wash</li><li>Kaylee</li><li>Book</li><li>Inara</li><li>Jayne</li><li>Simon</li><li>Spoilers, sweetie!</li></ul>',
    scope: {
      classModel: '='
    },
    link: function(scope, element, attrs) {
      scope.insideCompactor = function() {
        scope.compacted = scope.classModel;
      };
      scope.insideCompactor();
      scope.$watch('classModel', function(newValue) {
        scope.insideCompactor();
      });
    }
  };
}]);

Понимаю. Поскольку значение находится в изолированной области видимости, вы можете напрямую $ watch () вместо попытки посмотреть функцию, которая возвращает текущий список классов. Это делает то, что мне нужно, хотя я все еще хотел бы посмотреть что-то общее на элементах. Спасибо!