AngularJS ng-include không bao gồm chế độ xem trừ khi được chuyển vào $ scope

Có sai không khi cho rằng ngIncludecó thể đi theo con đường thô? Tôi tiếp tục cố gắng thiết lập của tôi ngIncludenhư sau:

<div ng-include src="views/header.html"></div>

Điều này không hoạt động nhưng nếu tôi làm điều gì đó như thế này thì nó hoạt động.

// HeaderController
app.controller('HeaderCtrl', function($scope){
   $scope.templates = {[
     template: { url: 'views/header.html' }
   ]};

   $scope.template = $scope.templates[0].template;
});

Trong index.html của tôi

<div ng-controller="HeaderCtrl">
  <div ng-include src="template.url"></div>
</div>

Có ngIncludechỉ ngoại trừ các giá trị ngoài phạm vi không? Nếu vậy thì tại sao nó lại theo cách này chứ không phải là một phần của html.

ng-includechấp nhận một biểu thức. Nếu bạn muốn chỉ định URL rõ ràng trực tiếp trong đó, bạn phải cung cấp một chuỗi.

<div ng-include src="'page.html'"></div>

ng-include, như các chỉ thị khác ( ng-class, ng-src...) đánh giá một biểu thức Angular từ phạm vi. Nếu không có dấu ngoặc kép ( ''), nó sẽ tìm kiếm một biến của phạm vi.

Lưu ý rằng bạn không phải chỉ định srcthuộc tính.

<div ng-include src="'views/header.html'"></div>

Có thể được viết lại thành: (đơn giản hơn)

<div ng-include="'views/header.html'"></div>

Bạn cũng có thể sử dụng ng-include như một phần tử :

<ng-include src="'views/header.html'"></ng-include>