Làm thế nào để sử dụng `thay thế` của định nghĩa chỉ thị?


81

Trong tài liệu này: http://docs.angularjs.org/guide/directive , nó nói rằng có một replacecấu hình cho các lệnh:

mẫu - thay thế phần tử hiện tại bằng nội dung của HTML. Quá trình thay thế di chuyển tất cả các thuộc tính / lớp từ phần tử cũ sang phần tử mới. Xem phần Tạo thành phần bên dưới để biết thêm thông tin.

mã javascript

app.directive('myd1', function(){
  return {
    template: '<span>directive template1</span>',
    replace: true
  }
});

app.directive('myd2', function(){
  return {
    template: '<span>directive template2</span>',
    replace: false
  }
});

Mã HTML

<div myd1>
  original content should be replaced
</div>
<div myd2>
  original content should NOT be replaced
</div>

Nhưng trang cuối cùng trông giống như:

directive template1
directive template2

Có vẻ như replacekhông hoạt động. Tôi có bỏ lỡ điều gì không?

Bản demo trực tiếp: http://plnkr.co/edit/rGIgmjO81X2UxJohL4HM?p=preview

Câu trả lời:


174

Bạn đang bối rối với transclude: true, cái nào sẽ nối nội dung bên trong.

replace: truecó nghĩa là nội dung của mẫu chỉ thị sẽ thay thế phần tử mà chỉ thị được khai báo, trong trường hợp này là <div myd1>thẻ.

http://plnkr.co/edit/k9qSx15fhSZRMwgAIMP4?p=preview

Ví dụ như không có replace:true

<div myd1><span class="replaced" myd1="">directive template1</span></div>

với replace:true

<span class="replaced" myd1="">directive template1</span>

Như bạn có thể thấy trong ví dụ sau, thẻ div thực sự đã được thay thế .


Điều gì về transclude: 'phần tử'. Nó dường như làm điều tương tự như thay thế: 'true' khi sử dụng ng-transclude.
CMCDragonkai

Có phải Replace: false, giống như không sử dụng Replace cả?
Neil

1
@Neil Có. Rời nó đi cũng giống nhưfalse
checketts

10
replacehiện không được dùng nữa
Robert

2
@Robert không 'thay thế' sẽ có một sự thay thế hay nó biến mất?
cirovladimir

12

Như tài liệu nêu rõ, 'thay thế' xác định xem phần tử hiện tại có được thay thế bằng chỉ thị hay không. Tùy chọn khác là về cơ bản nó chỉ được thêm vào khi còn nhỏ. Nếu bạn nhìn vào nguồn plnkr của mình, hãy lưu ý rằng đối với lệnh thứ hai, nơi thay thế là sai, thẻ div vẫn ở đó. Đối với chỉ thị đầu tiên thì không.

Kết quả đầu tiên:

<span myd1="">directive template1</span>

Kết quả thứ hai:

<div myd2=""><span>directive template2</span></div>

5

Thay thế [Đúng | Sai (mặc định)]

Hiệu ứng

1.  Replace the directive element. 

Sự phụ thuộc:

1. When replace: true, the template or templateUrl must be required. 

0

Ngoài ra, tôi cũng gặp lỗi này nếu tôi có nhận xét ở cấp cao nhất của mẫu với phần tử gốc thực tế.

<!-- Just a commented out stuff -->
<div>test of {{value}}</div>
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.