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