AngularJS 中的指令連結函式
我們將介紹 AngularJS 中的指令和指令連結函式,並通過示例來理解它們。
Angular 中的指令連結
指令是 DOM 元素標記,告訴 AngularJS 將 HTML 擴充套件到 DOM 元素及其子元素。
在 AngularJS 中,大多數指令以 ng-
開頭,其中 ng 代表 Angular。AngularJS 中有很多內建指令,我們也可以為我們的應用程式建立自定義指令。
一些被廣泛使用的內建指令是 ng-app
、ng-init
、ng-model
、ng-bind
等。
讓我們建立一個新的 AngularJS 應用程式來檢視指令示例。
首先,我們將使用 script
標籤新增 AngularJS 庫。
# AngularJs
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script>
現在,我們將使用 ng-app
定義 AngularJS 應用程式。
# AngularJs
<body ng-app="">
...
</body>
然後,我們將使用 ng-model
指令定義模型名稱,並在 div
中顯示模型的值。
# AngularJs
<input type="text" ng-model="name" />
<div class="Identity-name">
Hello {{name}}, Welcome Back!
</div>
輸出:
讓我們通過輸入值來測試它。
輸出:
Angular 中的指令連結功能
現在讓我們通過一個示例來討論 Angular 中的指令連結功能,以瞭解如何在 AngularJS 中建立自定義指令。
首先,我們將在 index.html
中設定我們的模板,包括 AngularJS 庫,並使用 ng-app="my-app"
定義 AngularJS 應用程式。在我們的應用程式中,我們將描述將使用 ng-controller="Controller"
操作的控制器。
我們將在控制器內部建立一個帶有自定義指令連結 programming-language
的 div
。
index.html
中的程式碼如下所示。
# AngularJs
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Directive Link Function Example by Rana Hasnain Khan</title>
<script src="//code.angularjs.org/snapshot/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="my-app">
<div ng-controller="Controller">
<div programming-language></div>
</div>
</body>
</html>
現在,在控制器內部的 script.js
中,我們將為一種語言定義一個範圍,我們將在其中提供該語言的名稱和最新版本。
# AngularJs
(function(angular) {
'use strict';
angular.module('my-app', [])
.controller('Controller', ['$scope', function($scope) {
$scope.language = {
name: 'Angular Js',
version: '1.8.2'
};
}])
使用 directive link function,
,我們將連線我們的指令 programming-language
和函式。我們將使用來自語言範圍的值傳遞模板。
script.js
中的最終程式碼如下所示。
# AngularJs
(function(angular) {
'use strict';
angular.module('my-app', [])
.controller('Controller', ['$scope', function($scope) {
$scope.language = {
name: 'Angular Js',
version: '1.8.2'
};
}])
.directive('programmingLanguage', function() {
return {
template: 'Name: {{language.name}} <br> Version: {{language.version}}'
};
});
})(window.angular);
輸出:
通過這種方式,我們可以輕鬆地使用內建指令並建立新的自定義指令,這些指令可用於在模板檔案中傳遞值或模板。
Rana is a computer science graduate passionate about helping people to build and diagnose scalable web application problems and problems developers face across the full-stack.
LinkedIn