AngularJS 中的指令連結函式

Rana Hasnain Khan 2024年2月15日
  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