AngularJS tut 21: includes

0
(0)

Với AngularJS, bạn có thể bao gồm HTML từ một tệp bên ngoài.


AngularJS Bao gồm

Với AngularJS, bạn có thể bao gồm nội dung HTML bằng cách sử dụng lệnh ng-include :

Thí dụ

<body ng-app=””>

<div ng-include=”‘myFile.htm'”></div>

</body>

Hãy tự mình thử »


Bao gồm mã AngularJS

Các tệp HTML mà bạn bao gồm với lệnh ng-include, cũng có thể chứa mã AngularJS:

myTable.htm:

<table>
  <tr ng-repeat="x in names">
    <td>{{ x.Name }}</td>
    <td>{{ x.Country }}</td>
  </tr>
</table>

Bao gồm tệp “myTable.htm” trong trang web của bạn và tất cả mã AngularJS sẽ được thực thi, ngay cả mã bên trong tệp được bao gồm:

Thí dụ

<body>

<div ng-app="myApp" ng-controller="customersCtrl">
  <div ng-include="'myTable.htm'"></div>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
  $http.get("customers.php").then(function (response) {
    $scope.names = response.data.records;
  });
});
</script>

Hãy tự mình thử »



Bao gồm các tên miền chéo

Theo mặc định, chỉ thị ng-include không cho phép bạn bao gồm các tệp từ các miền khác.

Để bao gồm các tệp từ một miền khác, bạn có thể thêm một danh sách trắng gồm các tệp và / hoặc miền hợp pháp trong chức năng cấu hình của ứng dụng của bạn:

Thí dụ:

<body ng-app="myApp">

<div ng-include="'https://tryit.w3schools.com/angular_include.php'"></div>

<script>
var app = angular.module('myApp', [])
app.config(function($sceDelegateProvider) {
  $sceDelegateProvider.resourceUrlWhitelist([
    'https://tryit.w3schools.com/**'
  ]);
});
</script>

</body>


Hãy tự mình thử »

Đảm bảo rằng máy chủ trên đích cho phép truy cập tệp tên miền chéo.

How useful was this post?

Click on a star to rate it!

Average rating 0 / 5. Vote count: 0

No votes so far! Be the first to rate this post.

Related posts

AngularJS tut 25: Tham khảo thêm về AngularJS

AngularJS tut 24: Làm thử 1 ứng dụng AngularJS

AngularJS tut 23 : AngularJS Routing