AngularJS 中的指令链接函数

当前位置：主页 > 学无止境 > WEB前端 > Angular >

Vue React JavaScript Angular CSS HTML

AngularJS 中的指令链接函数

作者：迹忆客最近更新：2023/05/09 浏览次数：

我们将介绍 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 自定义指令示例