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