更新

Question

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

为什么不是＆＃34;一些现有的内容＆＃34;在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）和指令＆＃39; s模板应追加作为其子项

OR

指令所应用的元素应该被指令的模板替换（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

的示例

请参阅this以了解有关移植的更多信息。

Answer 2

`replace`已弃用

来自文档：

false（[已弃用！]，将在下一个主要版本中删除 - 即v2.0）

指定模板应替换的内容。默认为true。


false - 模板将替换指令的元素。

replace: true - 模板将替换指令元素的内容。

- AngularJS Comprehensive Directive API

来自GitHub：

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

- AngularJS Issue #7636

更新

注意：<form method="post" id="project-info" action="/wp-content/themes/Avada/update_item_meta.php"> <table class="project-info-form"> <tr> <td><label>Item ID: </label> <select name="project-item-id"> <option value=""></option> <option value="35">35</option> <option value="36">36</option> </select> </td> <td> <label>Project ID: </label> <input type="number" name="pid"> </td> <td> <label>Start Count: </label> <input type="number" name="scount"> </td> <td> <label>End Count: </label> <input type="number" name="ecount"> </td> </tr> <tr> <td align="right" colspan="4"> <input type="submit" value="Update Item" class="update-item-button"> </td> </tr> </table> </form>已弃用，建议不要使用，主要是由于此处列出的问题。它已在新的Angular中完全删除。

替换问题：true

有关详细信息，请参阅AngularJS $compile Service API Reference - Issues with replace:true。

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

2 个答案:

`replace`已弃用

更新

替换问题：true

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

2 个答案:

replace已弃用

更新

替换问题：true

`replace`已弃用