javascript - AngularJS 指令属性 : Replace deprecated - Equivalent?

Question

所以 AngularJs正在弃用 Replace指令的属性。 reference

上下文:

  .directive('myDir', function($compile) {
    return {
      restrict: 'E',
      template: '<div>{{title}}</div>'
    }
  });

这将输出:

<my-dir>
   <div> some title </div>
</my-dir>

所以，Replace将取代 <my-dir></my-dir>与 template .现在有什么等价物？还是只是将指令与 restrict: 'A' 一起使用？ .

我创建了这个:

  .directive('myDir', function($compile) {
    return {
      restrict: 'E',
      template: '<div>{{title}}</div>',
      link: link
    };

    function link(scope, iElem, IAttr, ctrl, transcludeFn) {
      var parent = iElem.parent();
      var contents = iElem.html();

      iElem.remove();

      parent.append($compile(contents)(scope));
    }
  });

将输出:

<div> some title </div>

Answer 1

基本等同于 replace: true 是

app.directive('directive', function () {
  return {
    ...
    link: function postLink(scope, element, attrs) {
      element.replaceWith(element.contents());
    }
  };
});

但是，您可以很容易地发现副作用。绑定(bind)仍然存在，但指令中的属性不会转换为模板。

幸运的是，除非需要有条件的replace，否则通常没有理由这样做。正如您已经注意到的那样，replace 被认为不推荐用于 Angular 2(它不适合 Web 组件概念)，但对于 1.x 完全没问题。