如何为自定义 AngularJS 指令使用“替换"功能? [英] How to use the 'replace' feature for custom AngularJS directives?

问题描述

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

当replace=false 时，为什么不显示一些现有内容"?

或者说更谦虚一点，您能不能解释一下指令中的replace=true/false 特性是什么以及如何使用它?

示例

JS/Angular:

HTML:

<my-dir><h3>一些现有内容</h3></my-dir>

在此处在 Plunker 中查看:

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

解决方案

replace:true is Deprecated

来自文档:

<块引用>

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

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

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

-- AngularJS 综合指令 API

来自 GitHub:

<块引用>

Caitp-- 它已被弃用，因为 replace: true 存在已知的非常愚蠢的问题代码>，其中许多无法真正以合理的方式修复.如果您小心并避免这些问题，那么您将获得更多权力，但为了新用户的利益，告诉他们这会让您头疼，不要这样做"会更容易.

-- AngularJS 问题 #7636

---

更新

<块引用>

注意:replace: true 已被弃用，不推荐使用，主要是由于此处列出的问题.它已在新的 Angular 中完全删除.

替换问题:true

• 属性值未合并
• 之前没有对指令进行重复数据删除编译
• transclude: element 在替换模板根目录中会产生意想不到的效果

有关详细信息，请参阅

• AngularJS $compile 服务 API 参考 - 问题用 replace:true

Why does replace=true or replace=false not have any impact in the code below?

Why isn't the "some existing content" being displayed when replace=false?

Or putting it more humbly, can you kindly explain what is the replace=true/false feature in directives and how to use it?

Example

JS/Angular:

<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>

See it in Plunker here:

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

解决方案

replace:true is Deprecated

From the Docs:

replace ([DEPRECATED!], will be removed in next major release - i.e. v2.0)

specify what the template should replace. Defaults to false.

• true - the template will replace the directive's element.
• false - the template will replace the contents of the directive's element.

-- AngularJS Comprehensive Directive API

From GitHub:

Caitp-- It's deprecated because there are known, very silly problems with replace: true, a number of which can't really be fixed in a reasonable fashion. If you're careful and avoid these problems, then more power to you, but for the benefit of new users, it's easier to just tell them "this will give you a headache, don't do it".

-- AngularJS Issue #7636

---

Update

Note: replace: true is deprecated and not recommended to use, mainly due to the issues listed here. It has been completely removed in the new Angular.

Issues with replace: true

• Attribute values are not merged
• Directives are not deduplicated before compilation
• transclude: element in the replace template root can have unexpected effects

For more information, see

• AngularJS $compile Service API Reference - Issues with replace:true

这篇关于如何为自定义 AngularJS 指令使用“替换"功能?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！