javascript - Angular强制页面执行指令添加了html属性

Question

我有一个指令，可以将 spellcheck 属性添加到 2 个 div 中，如下所示:

(function(){  

  'use strict';

  app.directive('spellchecker', spellchecker);
  spellchecker.$inject = ['$timeout', '$compile'];

  function spellchecker($timeout, $compile) {
    return {
      restrict: 'A',
      link: function(scope, element, attrs) {
          attrs.$set('contenteditable', true);
          attrs.$set('spellcheck', true);
          $compile(element)(scope); //<- this does not seem to do the trick for me.
        }
      }
    };
  };
})();

哈姆尔

.title(spellchecker="{{!!preview}}") {{thing.title}}

spellchecker="{{!!preview}}") 解析为 true。

我也尝试通过用 div 包装 html 来实现相同的目标，无需使用指令，如下所示:

%div{'spellcheck':'true', 'contenteditable':'true'}
  .title {{thing.title}}

我希望指令在页面 div 上强制进行拼写检查，但目前拼写检查仅在单击添加了拼写检查属性的两个 div 中的任何一个时才起作用。 我必须编译 div 的 html 吗？

Answer 1

简而言之，答案是肯定的，您需要编译添加的属性，否则它们将仍然是纯 HTML，没有任何用处。

您只需将 $compile 添加到依赖项并使用它即可做到这一点:

link: function(scope, element, attrs) {
      attrs.$set('contenteditable', true);
      attrs.$set('spellcheck', true);
      $compile(element)(scope);  //element will contain added directives
  }