AngularJS ng-include用法及代碼示例

AngularJS具有內置指令，可使用ng-include指令來包含其他AngularJS文件中的函數。“ ng-include指令”的主要目的是在AngularJS應用程序中獲取，編譯和包含外部HTML文件。主應用程序中的子節點。 ng-include屬性的值也可以是一個表達式，該表達式返回文件名。所有HTML元素都支持此函數。

用法:

<element ng-include="filename" onload="expression" autoscroll="expression" >
Content...</element>

注意：這裏的onload和autoscroll參數是可選的，onload定義一個表達式來評估何時加載包含的文件，而autoscroll定義包含的部分是否應該能夠滾動到特定的視圖。

範例：1

外部HTML文件：將此文件另存為child.html。

<!-- child.html -->
<p>Hello Geeks from include component.</hp> 
<!--I am a partial, i don't require head and body tags.-->

碼：

<!DOCTYPE html>  
<html>  
  
<head>  
    <title>AngularJS | ng-include Directive</title>  
    <script src=  
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">  
    </script>  
</head>  
  
<body ng-app="" style="text-align:center">  
     <h1 style="color:green">GeeksforGeeks</h1>  
     <h3>ng-include Directive</h3>                              
     <div ng-include="'child.html'"></div> 
</body> 
  
</html>

輸出：

範例2：

外部HTML文件：將此文件另存為table.html。

<!-- table.html -->
<table> 
  <tr ng-repeat="Subject in tutorials"> 
    <td>{{ Subject.Name }}</td> 
    <td>{{ Subject.Description }}</td> 
  </tr> 
</table>

碼：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <meta http-equiv="X-UA-Compatible" content="ie=edge"> 
    <title>AngularJS | ng-include Directive</title> 
    <script src= 
"http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"> 
    </script>   
</head> 
<body ng-app="main-app"> 
    <center> 
        <h1 style="color:green;">GeeksforGeeks</h1> 
         <h3>ng-include Directive</h3> 
        <div ng-controller="AngularController"> 
            <div ng-include="'table.html'"></div> 
        </div> 
  
   
<script> 
    var main_app = angular.module('main-app', []); 
    main_app.controller('AngularController', function($scope) { 
    $scope.tutorials =[ 
            {Name:"AngularJS", Description:"Front End Framework"}, 
            {Name:"NodeJS", Description:"Server side JavaScript"}, 
            {Name:"ExpressJS", Description:"Server side JS Framework"} 
        ]; 
    }); 
</script> 
</body> 
</html>

輸出：

相關用法

注：本文由純淨天空篩選整理自Pankaj_Singh大神的英文原創作品 AngularJS | ng-include Directive。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。