如何使用'替换'功能来定制AngularJS指令？

Question

为什么replace=true还是replace=false没有在下面的代码产生任何影响？

当replace = false时,为什么不显示"某些现有内容"？

或者更谦虚地说,你能否解释一下replace=true/false指令中的功能是什么以及如何使用它？

例

JS /角:

<script>
    angular.module('scopes', [])
          .controller('Ctrl', function($scope) {
                $scope.title = "hello";

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

HTML:

<div ng-controller="Ctrl">
    <my-dir><h3>some existing content</h3></my-dir>
</div>

在Plunker中看到它:

http://plnkr.co/edit/4ywZGwfsKHLAoGL38vvW?p=preview

Answer 1

当你replace: true得到以下DOM时:

<div ng-controller="Ctrl" class="ng-scope">
    <div class="ng-binding">hello</div>
</div>

然而,随着replace: false你得到这个:

<div ng-controller="Ctrl" class="ng-scope">
    <my-dir>
        <div class="ng-binding">hello</div>
    </my-dir>
</div>

因此replace指令中的属性引用指令所应用的元素(<my-dir>在这种情况下)是否应该保留(replace: false)并且指令的模板应该作为其子项附加,

要么

应用指令的元素应该由指令的模板替换(replace: true).

在这两种情况下,元素(应用指令)的子元素都将丢失.如果你想坚持元素的原始内容/孩子,你必须转换它.以下指令将执行此操作:

.directive('myDir', function() {
    return {
        restrict: 'E',
        replace: false,
        transclude: true,
        template: '<div>{{title}}<div ng-transclude></div></div>'
    };
});

在这种情况下,如果在指令的模板中有一个具有属性的元素(或元素)ng-transclude,则其内容将被元素(应用指令)原始内容替换.

请参阅translusion示例http://plnkr.co/edit/2DJQydBjgwj9vExLn3Ik?p=preview

请参阅此内容以阅读有关移植的更多信息.

Answer 2

replace:true 已弃用

来自Docs:

replace ([DEPRECATED!],​​将在下一个主要版本中删除 - 即v2.0)

指定模板应替换的内容.默认为false.

• true - 模板将替换指令的元素.
• false - 模板将替换指令元素的内容.

- AngularJS综合指令API

来自GitHub:

Caitp--它已被弃用,因为已知的,非常愚蠢的问题replace: true,其中一些问题无法以合理的方式得到解决.如果你小心并避免这些问题,那么对你有更多的权力,但为了新用户的利益,更容易告诉他们"这会让你头疼,不要这样做".

- AngularJS问题#7636