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。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。