Dlaczego ma replace=truelub replace=falsenie ma żadnego wpływu na poniższy kod?

Dlaczego „niektóre istniejące treści” nie są wyświetlane, gdy replace = false?

Albo mówiąc bardziej pokornie, czy możesz uprzejmie wyjaśnić, jaka jest replace=true/falsefunkcja dyrektyw i jak z niej korzystać?

Przykład

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>

Zobacz to w Plunker tutaj:

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

Kiedy replace: trueotrzymasz następujący fragment DOM:

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

mając na uwadze, replace: falseże otrzymujesz to:

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

Tak więc replacewłaściwość w dyrektywach odnosi się do tego, czy element, do którego dyrektywa jest stosowana ( <my-dir>w tym przypadku) powinien pozostać ( replace: false), a szablon dyrektywy powinien zostać dołączony jako jego dziecko,

LUB

element, do którego ma zastosowanie dyrektywa, należy zastąpić ( replace: true) wzorem dyrektywy.

W obu przypadkach dzieci elementu (do którego jest stosowana dyrektywa) zostaną utracone. Jeśli chciałbyś zachować oryginalną treść / dzieci elementu, musiałbyś to przetłumaczyć. Zrobiłaby to następująca dyrektywa:

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

W takim przypadku, jeśli w szablonie dyrektywy masz element (lub elementy) z atrybutem ng-transclude, jego zawartość zostanie zastąpiona oryginalną treścią elementu (do którego dyrektywa jest stosowana).

Zobacz przykład przeniesienia http://plnkr.co/edit/2DJQydBjgwj9vExLn3Ik?p=preview

Zobacz to, aby dowiedzieć się więcej o transpozycji.

replace:true jest przestarzałe

Z Dokumentów:

replace ([WYCOFANE!], Zostanie usunięte w następnej głównej wersji - tj. W wersji 2.0)

określ, co szablon ma zastąpić. Domyślnie false.

• true - szablon zastąpi element dyrektywy.
• false - szablon zastąpi zawartość elementu dyrektywy.

- AngularJS Comprehensive Directive API

Z GitHub:

Caitp-- Jest przestarzały, ponieważ istnieją znane, bardzo głupie problemy replace: true, z których wielu nie da się naprawić w rozsądny sposób. Jeśli będziesz ostrożny i unikniesz tych problemów, będziesz mieć więcej mocy, ale z korzyścią dla nowych użytkowników, łatwiej będzie im po prostu powiedzieć „to przyprawi Cię o ból głowy, nie rób tego”.

- AngularJS, wydanie # 7636

Aktualizacja

Uwaga: replace: truejest przestarzała i nie zaleca się jej używania, głównie z powodu problemów wymienionych tutaj. W nowym Angular został całkowicie usunięty.

Problemy z zamianą: prawda

• Wartości atrybutów nie są łączone
• Dyrektywy nie są deduplikowane przed kompilacją
• transclude: element w katalogu głównym szablonu zastępowania może mieć nieoczekiwane skutki

Więcej informacji znajdziesz w

• Dokumentacja interfejsu API usługi AngularJS $ compile - problemy z replace:true