Вызов element.replaceWith внутри сферы $ на броски TypeError

Question

Мы имеем следующую директиву:

.directive("directiveToggleElement", function(FlagsService) { 
    return { 
     restrict: "E", 
     scope: {}, 
     link: function(scope, element, attrs) 
     { 
      scope.showMe = FlagsService.isOn(attrs.toggleKey); 
      scope.featureText = attrs.featureText; 

      var htmlTag = '<div class="panel ng-scope" ng-class="{selected: selected}" ng-click="selected = !selected;"></div>'; 
      var htmlComment = '<!-- TogglePlaceholder: ' + attrs.toggleKey +'-->'; 
      element.replaceWith(scope.showMe ? htmlComment + htmlTag : htmlComment); 

      // Listen for change broadcast from flagsservice to toggle local store 
      scope.$on('LocalStorage.ToggleChangeEvent.' + attrs.toggleKey, function(event, parameters) { 
       console.log('stuff changed - ' + parameters.key + ' ' + parameters.newValue); 
       scope.showMe = parameters.newValue; 
       element.replaceWith(scope.showMe ? htmlComment + htmlTag : htmlComment); 
      }); 
     } 
    } 
}) 

Идея заключается в том, что на основе стоимости функция переключения (или флаг функция) директива будет выводить комментарий с тегом или просто комментарий.

Исходный элемент.replaceWith работает так, как ожидалось, но вызов изнутри области. $ On генерирует «TypeError: не может вызвать метод« replaceChild »из null». Мы проверяли элемент перед каждым вызовом и не можем обнаружить очевидную разницу.

Может ли кто-нибудь объяснить, почему здесь была ошибка, или сообщить о возможном обходном пути, который позволит нам сделать то же самое?

Мы имеем рабочую директиву, которая устанавливает значение нг-шоу:

.directive("directiveToggle", function(FlagsService) { 
    return { 
     restrict: "A", 
     transclude: true, 
     scope: {}, 
     link: function(scope, element, attrs) 
     { 
      scope.showMe = FlagsService.isOn(attrs.toggleKey); 

      // Listen for change broadcast from flagsservice to toggle local store 
      scope.$on('LocalStorage.ToggleChangeEvent.' + attrs.toggleKey, function(event, parameters) { 
       console.log('stuff changed - ' + parameters.key + ' ' + parameters.newValue); 
       scope.showMe = parameters.newValue; 
      }); 
     }, 
     template: '<div class="panel ng-scope" ng-show="showMe" ng-class="{selected: selected}" ng-click="selected = !selected;"><span ng-transclude></span></div>', 
     replace: true 
    } 
}) 

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

Answer 1

Вы по-прежнему можете использовать директиву ng-if в своем пользовательском «директивном указателе» без необходимости в контроллере. Для достижения этой цели необходимо использовать transclude вариант:

.directive("directiveToggle", function (FlagsService) { 
    return { 
     template: '<div ng-transclude ng-if="isEnabled"></div>', 
     transclude: true, 
     restrict: 'A', 
     scope: true, 
     link: function ($scope, $element, $attrs) { 
      var feature = $attrs.featureToggle; 
      $scope.isEnabled = FlagsService.isOn(feature); 

      $scope.$on('LocalStorage.ToggleChangeEvent.' + feature, function (event, parameters) { 
       $scope.isEnabled = parameters.newValue; 
      }); 
     } 
    } 
}); 

выше берет наценку изнутри «directiveToggle», а затем, окружив его внутри шаблона, где «нг-transclude» директивные знаков точка ввода. Также в шаблоне включена директива «ng-if», которая просматривает член «isEnabled» в текущей области для «directiveTemplate».

Одно из предостережений с этим подходом заключается в том, что вам нужна директива для создания собственной области видимости/изолированной области, если у вас есть несколько экземпляров этой директивы, иначе член «isEnabled» будет разделяться между директивами.