限制 AngularJS 中的自定義指令

Muhammad Adil 2022年4月20日
限制 AngularJS 中的自定義指令

指令是一種特殊型別的 AngularJS 元件,用於擴充套件 HTML 元素的功能或建立具有豐富行為的新功能,這是純 HTML 所不具備的。

AngularJS 包括預構建的指令,如 ngBindngModelngClass。Angular 框架使用這些指令來指示瀏覽器使用新的 HTML 標記。

HTML 標記和註釋以及 CSS 類和屬性都是指令的示例。

Restriction 指令通過向其新增屬性來限制從外部 HTML 程式碼對 DOM 元素的訪問。

本文將討論如何在 AngularJS 中限制自定義指令。

AngularJS 指令限制 AE

restrict 屬性告訴 Angular 如何建立一個只有一個字母長的新指令。它可以有四個值:ACEM,或這些值的組合,例如 EA、ME 等。

每一個都具有重要意義。

下面列出了限制值及其含義。

  1. E 表示它只能用作元素。
  2. A 表示它只能用作屬性。
  3. C 僅作為類屬性有效。
  4. M 僅適用於評論。

假設指令的名稱是 hello。以下是它們的種類和用法。

A = <div hello></div>
C = <div class="hello"></div>
E = <hello data="Demo"></hello>
M = <!--directive:hello -->

在開發負責模板的元件時,使用元素。當你為模板的各個方面構建域特定語言時,這是一種常見的情況。

向現有元素新增新功能時,請使用屬性。

當利用屬性而不是元素時,你可以將多個指令應用於同一個 DOM 節點。

這對於表單控制元件特別有用,你可以在其中使用其他屬性來突出顯示、禁用或新增標籤,而不必包含許多標籤的元件。

示例(JavaScript):

var app = angular.module('myapp', []);
app.controller('MainCtrl', function($scope) {
    $scope.name = 'World';
});
app.directive('helloWorld',function(){
    return {
        replace:true,
        restrict: 'E',
        template: '<h2>Hello World</h2>'
    }
});

示例(HTML):

<!DOCTYPE html>
<html ng-app="myapp">
    <head>
        <meta charset="utf-8" />
        <script>document.write('<base href="' + document.location + '" />');</script>
        <script data-require="angular.js@1.2.x" src="http://code.angularjs.org/1.2.7/angular.js" data-semver="1.2.7"></script>
        <script src="app.js"></script>
    </head>
    <body ng-controller="MainCtrl">
        <hello-world></hello-world>
        <div hello-world></div>
        <div class="hello-world"></div>
    </body>
</html>

點選這裡檢視程式碼的演示。

Muhammad Adil avatar Muhammad Adil avatar

Muhammad Adil is a seasoned programmer and writer who has experience in various fields. He has been programming for over 5 years and have always loved the thrill of solving complex problems. He has skilled in PHP, Python, C++, Java, JavaScript, Ruby on Rails, AngularJS, ReactJS, HTML5 and CSS3. He enjoys putting his experience and knowledge into words.

Facebook

相關文章 - Angular Directive