与ng-attr或ng-class一起使用的属性指令

Question

前言

我已经看到了许多有关使用ng-attr和指令的问题，但是我还没有看到这种特殊情况的实现。

代码和插件

http://bit.ly/1s6gWkD

用例

我正在尝试通过属性指令将加载叠加层动态添加到目标DOM元素中。 这个想法是，由于目标DOM元素具有attribute指令，因此DOM会将叠加层附加到其子级。

我已经从各个角度解决了这个问题，但是没有运气。 因为这将在许多我们可能希望阻止某些UI但又不完全阻止应用程序使用模式的地方使用，所以我希望保持模板干净并动态附加。

问题

• 这有可能吗（假设有一个指令性生命周期事件来解决这个问题），顺便说一句，这就是我所说的动态方法
• 如果不可能的话，我确实尝试了一些不理想的“静态”方法，例如运气不好。
  • ng-class =“ {loadOverlay：hasOverlay}”
  • NG-ATTR的负载重叠= “hasOverlay”

意见

我确实意识到这种方法可能存在问题，因为一旦删除属性，指令中就可能没有生命周期事件来知道它被命令删除自身。 我对指令不是很了解，是否确实如此。

理想情况下，我正在寻找

没有覆盖的目标DOM元素

带覆盖的目标DOM元素

Answer 1

解决静态方法

经过考虑后，我认为最好是结合使用更多通用的指令和“静态”方法。

plunkr解决方案

http://bit.ly/1toMCV9

剪

.directive('loadOverlay', function() {

return {

  restrict: 'EA',

  scope: true,

  link: function(scope, element, attrs) {

    var id = 'nx-load-overlay-' + parseInt(Math.random() * 1000);

    function toggleOverlay(show) {
      if (show === true) {
        var d = '<div id="' + id + '" class="nx-load-overlay"><div class="nx-load-overlay-spinner"><span class="fa fa-cog fa-spin fa-3x"></span><br/><span style="font-weight:bold; font-size:larger;">loading</span></div></div>';
        element.append(d)
      } else {
        $('#' + id).remove()
      }
    }

    if (attrs.loadOverlay)
      scope.$watch(attrs.loadOverlay, toggleOverlay);

    else
      toggleOverlay(true)
  }
}
})