AngularJS 中的指令链接函数

Rana Hasnain Khan 2023年1月30日 2022年4月20日
  1. Angular 中的指令链接
  2. Angular 中的指令链接功能
AngularJS 中的指令链接函数

我们将介绍 AngularJS 中的指令和指令链接函数,并通过示例来理解它们。

Angular 中的指令链接

指令是 DOM 元素标记,告诉 AngularJS 将 HTML 扩展到 DOM 元素及其子元素。

在 AngularJS 中,大多数指令以 ng- 开头,其中 ng 代表 Angular。AngularJS 中有很多内置指令,我们也可以为我们的应用程序创建自定义指令。

一些被广泛使用的内置指令是 ng-appng-initng-modelng-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-languagediv

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 自定义指令示例

通过这种方式,我们可以轻松地使用内置指令并创建新的自定义指令,这些指令可用于在模板文件中传递值或模板。

Rana Hasnain Khan avatar Rana Hasnain Khan avatar

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

相关文章 - Angular Function