这个问题在这里已有答案:
为什么replace=true
或replace=false
对下面的代码没有任何影响?
当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中看到它:
当你有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
)并且指令的模板应该作为其子项附加,
要么
应该使用该指令的元素应该由指令的模板替换(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的例子
请参阅qazxsw poi以了解有关半透明的更多信息。
来自Docs:
replace:true
([DEPRECATED!],将在下一个主要版本中删除 - 即v2.0)指定模板应替换的内容。默认为
replace
。
false
- 模板将替换指令的元素。true
- 模板将替换指令元素的内容。
- false
来自GitHub:
AngularJS Comprehensive Directive API它已被弃用,因为Caitp--存在已知的非常愚蠢的问题,其中一些问题无法以合理的方式得到解决。如果你小心并避免这些问题,那么对你有更多的权力,但为了新用户的利益,更容易告诉他们“这会让你头疼,不要这样做”。
- replace: true
注意:AngularJS Issue #7636已弃用,不建议使用,主要是由于此处列出的问题。它已在新的Angular中完全删除。
有关更多信息,请参阅transclude: element
in the replace template root can have unexpected effects。