AngularJS Include指令用法详细介绍

2021年3月11日17:17:38 发表评论 755 次浏览

HTML不支持在html中嵌入html页面, 这就是我们使用AngularJS Include指令的原因。通过使用ng-controller指令, 我们可以轻松地完成任务。

语法如下:

<element ng-include=" ">content...<element>

例子:

<!DOCTYPE html>
<html>
<head>
     <script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js" >
     </script>
     <title>ng-include directives</title>
</head>
   
<body ng-app= "" >
     <center>
         <h1 style= "color:green;" >lsbin</h1>
         <div ng-include= "'geeks.html'" ></div>
     </center>
</body>
</html>

输出如下:

AngularJS |包括1

包括AngularJS代码:

与以前的情况类似, 你可以使用ng-include包含html文件, 类似地, 它可以包含AngularJS代码。

例子:

lsbin.html表:

< table >
   < tr ng-repeat = "x in courses" >
     < td >{{ x.Course }}</ td >
     < td >{{ x.Duration }}</ td >
   </ tr >
</ table >

代码如下:

<!DOCTYPE html>
< html >
< head >
   < script src =
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js" >
   </ script >
</ head >
< body >
   < div ng-app = "geeks" ng-controller = "customersCtrl" > 
     < div ng-include = "'Geekstable.html'" ></ div >
   </ div >
   < script >
     var app = angular.module('geeks', []);
     app.controller('customersCtrl', function($scope, $http) {
          $http.get("customers.php").then(function (response) {
              $scope.courses = response.data.records;
              });
          });
   </ script >
</ body >
</ html >

输出如下:

AngularJS |包括2

包括跨域:

如果要包括来自其他域的文件, 则可以在应用程序的config功能中添加合法文件或域的白名单。

样例代码:

<!DOCTYPE html>
< html >
   < script src =
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js" >
   </ script >
< body ng-app = "myApp" >
   < div ng-include = "'filel_path_from_anotherDomain'" ></ div >
   < script >
     var app = angular.module('myApp', [])
     app.config(function($sceDelegateProvider) {
         $sceDelegateProvider.resourceUrlWhitelist(['filel_path_from_anotherDomain']);
     });
   </ script >
</ body >
</ html >

木子山

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: