Question

在angular JS中，我们有一个名为replace的属性，在定义指令时可能的值为true或false。但我不明白这个属性将如何使用。当它设置为true时，它是否会替换HTML父元素

Answer 1

实际模板：

<div class="parent">
 <my-dir><div>Hello world!!</div></my-dir>
</div>

如果替换 true ，则会删除mir-dir标记。

 <div class="parent">
    <div>Hello world!!</div>
    </div>

如果替换 false ，则不会删除mir-dir标记。

 <div class="parent">
     <my-dir><div>Hello world!!</div></my-dir>
    </div>

希望你明白!!如果您有任何疑问，请与我联系。

Answer 2

替换 - 如果设置为true，则会将带有指令的元素替换为模板。

PS ：您必须使用templateUrl / template以及替换。

HTML

<div angular></div>
<div class="angular"></div>
<angular>Simple angular directive</angular>

JS

var App = angular.module('App', []);

App.directive('angular', function() {
  return {
    restrict: 'ECMA',
    replace: true,
    template: '<img src="http://goo.gl/ceZGf"/>'
  };
});

以上示例angular指令将替换其内容＆＃34; 简单角度指令＆＃34;按模板中的内容，即＆＃34; 替换内容＆＃34;。

Answer 3

根据角度documentation（替换选项）：

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

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

想象一下，你有一个名为my-directive的指令，其模板为<span>directive</span>，你的html代码为<div my-directive></div>。然后replace : false会导致：

<div my-directive><span class="replaced" my-directive="">directive</span></div>

replace : true导致：

<span class="replaced" my-directive="">directive</span>

请注意，此选项已弃用。

参见相关问题：

How to use `replace` of directive definition?

Explain replace=true in Angular Directives (Deprecated)

Angular JS：替换指令中的属性

3 个答案: