Tại sao replace=truehoặc replace=falsekhông có bất kỳ tác động nào trong đoạn mã dưới đây?

Tại sao "một số nội dung hiện có" không được hiển thị khi Replace = false?

Hoặc nói một cách khiêm tốn hơn, bạn có thể vui lòng giải thích replace=true/falsetính năng trong chỉ thị là gì và cách sử dụng nó không?

Thí dụ

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>

Xem nó trong Plunker tại đây:

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

Khi bạn có, replace: truebạn sẽ nhận được đoạn DOM sau:

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

trong khi, replace: falsebạn có được điều này:

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

Vì vậy, thuộc replacetính trong chỉ thị đề cập đến việc liệu phần tử mà chỉ thị đang được áp dụng ( <my-dir>trong trường hợp đó) có nên giữ nguyên hay không ( replace: false) và mẫu của chỉ thị phải được thêm vào làm con của nó,

HOẶC LÀ

phần tử mà chỉ thị đang được áp dụng phải được thay thế ( replace: true) bằng mẫu của chỉ thị.

Trong cả hai trường hợp, phần tử con (mà chỉ thị đang được áp dụng) sẽ bị mất. Nếu bạn muốn duy trì nội dung gốc / phần tử con, bạn sẽ phải loại bỏ nó. Lệnh sau sẽ thực hiện điều đó:

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

Trong trường hợp đó, nếu trong mẫu của chỉ thị bạn có một phần tử (hoặc các phần tử) có thuộc tính ng-transclude, nội dung của nó sẽ được thay thế bằng nội dung gốc của phần tử (mà chỉ thị đang được áp dụng).

Xem ví dụ về chuyển đổi http://plnkr.co/edit/2DJQydBjgwj9vExLn3Ik?p=preview

Xem phần này để đọc thêm về chuyển đổi.

replace:true không được chấp nhận

Từ Tài liệu:

replace ([DEPRECATED!], Sẽ bị xóa trong bản phát hành chính tiếp theo - tức là v2.0)

chỉ định những gì mẫu sẽ thay thế. Mặc định là false.

• true - mẫu sẽ thay thế phần tử của chỉ thị.
• false - mẫu sẽ thay thế nội dung của phần tử của chỉ thị.

- API chỉ thị toàn diện AngularJS

Từ GitHub:

Caitp-- Nó không được dùng nữa vì có những vấn đề đã biết, rất ngớ ngẩn replace: true, một số vấn đề trong số đó thực sự không thể được khắc phục một cách hợp lý. Nếu bạn cẩn thận và tránh những vấn đề này, thì bạn sẽ có nhiều quyền lực hơn, nhưng vì lợi ích của người dùng mới, sẽ dễ dàng hơn nếu bạn chỉ nói với họ "điều này sẽ khiến bạn đau đầu, đừng làm vậy".

- AngularJS Issue # 7636

Cập nhật

Lưu ý: replace: truekhông được dùng nữa và không được khuyến khích sử dụng, chủ yếu là do các vấn đề được liệt kê ở đây. Nó đã bị loại bỏ hoàn toàn trong Angular mới.

Vấn đề với thay thế: true

• Các giá trị thuộc tính không được hợp nhất
• Các chỉ thị không bị trùng lặp trước khi biên dịch
• transclude: element trong phần gốc của mẫu thay thế có thể có những tác động không mong muốn

Để biết thêm thông tin, hãy xem

• Tham chiếu API dịch vụ biên dịch AngularJS $ - Vấn đề với replace:true