Sử dụng biên dịch $ trên mẫu bên ngoài (templateURL) trong Chỉ thị góc

Question

Tôi có chỉ thị góc đệ quy sử dụng biến mẫu và được biên dịch trong hàm link.

Vấn đề ở chỗ, mẫu của tôi đã thực sự mất nhiều thời gian và không thể kiểm soát được và tôi muốn bên ngoài nó trong một tệp HTML bên ngoài (nó cũng sẽ giúp dễ dàng thụt lề tự động hơn).

Làm cách nào bạn có thể tải mẫu bên ngoài vào chỉ thị có thể được sử dụng bên trong $compile?

Tôi đã xem templateURL, nhưng điều đó không cho phép tôi đặt tên biến và chuyển cho hàm $compile.

var template = 
      "<p>My template</p>"+ 
      "<this-directive val='pass-value'></this-directive>"; 

return { 
    scope: { 
    ... 
    }, 
    ... 
    link: function(scope, element){ 
      element.html(template); 
      $compile(element.contents())(scope); 
     } 
} 

và

Answer 1

Bạn có thể sử dụng dịch vụ $templateRequest để lấy mẫu. Đây là một dịch vụ tiện lợi cũng lưu trữ mẫu trong số $templateCache, do đó chỉ yêu cầu một yêu cầu là template.html.

Như một minh hoạ (và không đi sâu vào vấn đề của thị đệ quy), điều này được sử dụng như sau:

link: function(scope, element){ 
    $templateRequest("template.html").then(function(html){ 
     var template = angular.element(html); 
     element.append(template); 
     $compile(template)(scope); 
    }); 
}; 

plunker (kiểm tra tab mạng để xem một yêu cầu mạng duy nhất)

Answer 2

Tôi thích sử dụng $ http để tải mẫu nếu kích thước của nó là lớn hơn: -

$http.get('mytemp.html').then(function(response) { 
      element.html(response.data); 
      $compile(element.contents())(scope); 
      });