AngularJS 中的指令链接函数

Angular 1年前 51

我们将介绍 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>

输出：

AngularJS 中的指令链接函数

让我们通过输入值来测试它。

输出：

AngularJS 中的指令链接函数

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);

输出：

AngularJS 中的指令链接函数