角指令替换=真 [英] Angular directive replace=true

问题描述

为什么替换= TRUE 或更换= FALSE 没有下code什么影响？

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?

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

see it in plunker here:

<一个href=\"http://plnkr.co/edit/4ywZGwfsKHLAoGL38vvW?p=$p$pview\">http://plnkr.co/edit/4ywZGwfsKHLAoGL38vvW?p=$p$pview

推荐答案

当你有更换：真正的你会得到下面这段DOM的：

When you have replace: true you get the following piece of DOM:

<div ng-controller="Ctrl" class="ng-scope">
    <div class="ng-binding">hello</div>
</div>

而使用替换：假你得到这样的：

<div ng-controller="Ctrl" class="ng-scope">
    <my-dir>
        <div class="ng-binding">hello</div>
    </my-dir>
</div>

所以替换在指令属性是指该元素是否该指令被应用（到＆LT;我-DIR＆GT; 在这种情况下）应保持（更换：假）和direcrive的模板应附，因为它的孩子，

So the replace property in directives refer to whether the element to which the directive is being applied (<my-dir> in that case) should remain (replace: false) and the direcrive's template should be appended as it's child,

或

要该指令被应用应该是元素的替换（更换：真正的）。该指令的模板

the element to which the directive is being applied should be replaced (replace: true) by the directive's template.

在这两种情况下元素的（到正在应用的指令）的孩子都将丢失。如果你想持之以恒元素的原创内容/你将不得不孩子translude它。下面的指令会做到这一点：

In both cases the element's (to which the directive is being applied) children will be lost. If you wanted to perserve the element's original content/children you would have to translude it. The following directive would do it:

.directive('myDir', function() {
    return {
        restrict: 'E',
        replace: false,
        transclude: true,
        template: '<div>{{title}}<div ng-transclude></div></div>'
    };
});

在这种情况下，如果在指令中的模板，你有属性的元素（或元素） NG-transclude ，它的内容将被替换由元素的（到正在应用的指令），原来的内容。

In that case if in the directive's template you have an element (or elements) with attribute ng-transclude, it's content will be replaced by the element's (to which the directive is being applied) original content.

请参阅例子translusion <一个href=\"http://plnkr.co/edit/2DJQydBjgwj9vExLn3Ik?p=$p$pview\">http://plnkr.co/edit/2DJQydBjgwj9vExLn3Ik?p=$p$pview

See example of translusion http://plnkr.co/edit/2DJQydBjgwj9vExLn3Ik?p=preview

请参阅this阅读更多关于translusion。

See this to read more about translusion.

这篇关于角指令替换=真的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！