首页 文章

如何将'replace'功能用于自定义AngularJS指令？ [重复]

提问于
浏览 次
87

这个问题在这里已有答案：

为什么 replace=true 或 replace=false 对下面的代码没有任何影响？

当replace = false时，为什么不显示“某些现有内容”？

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

Example

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

angularjs angularjs-directive

2 回答

  • 183

    当你有 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 ），指令的模板应该是 appended 作为其子节点，

    要么

    指令所应用的元素应该是指令模板的 replaced （ replace: true ） .

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

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

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

    参见translusion的例子http://plnkr.co/edit/2DJQydBjgwj9vExLn3Ik?p=preview

    请参阅this以阅读有关translusion的更多信息 .

    回复于
  • 32

    replace：true已弃用

    来自Docs：

    replace（[DEPRECATED！]，将在下一个主要版本中删除 - 即v2.0）指定模板应替换的内容 . 默认为false . true - 模板将替换指令的元素 . false - 模板将替换指令元素的内容 .

    来自GitHub：

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

    回复于

相关问题