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.
        }
      }
    };
  };
})();

Haml的

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

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

我还试图在没有指令的情况下通过用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
  }

Angular force页面执行指令添加了html属性

1 个答案: