Angular JS：替換指令中的屬性

Question

在angular JS中，我們有一個屬性，在定義指令時有一個名爲replace的可能值爲true或false的屬性。但我不明白這個屬性將如何使用。當它被設置爲true

Answer 1

實際的模板將取代HTML父元素：

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

如果更換是真，MIR-dir的標籤將被刪除。

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

如果更換是假，MIR-dir的標籤將不會被刪除。

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

希望你能理解!!讓我知道你是否有任何疑問。

Answer 2

替換 - 如果設置爲true，將用模板替換其上有指令的元素。

PS：您必須使用templateUrl/template和replace。

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"/>' 
    }; 
}); 

上面的例子角指令將通過模板即 「更換的內容」 內容替換其內容 「簡單的角度指令」。

Answer 3

據角（替換選項）的documentation：

真 - 模板將取代指令的元素。

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)