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