限制 AngularJS 中的自定義指令

Muhammad Adil 2022年4月20日

Angular Angular Directive

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

AngularJS 包括預構建的指令，如 ngBind、ngModel 和 ngClass。Angular 框架使用這些指令來指示瀏覽器使用新的 HTML 標記。

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

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

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

AngularJS 指令限制 `A` 與 `E`

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

每一個都具有重要意義。

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

E 表示它只能用作元素。
A 表示它只能用作屬性。
C 僅作為類屬性有效。
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>

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

Author: Muhammad Adil

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

AngularJS 指令限制 A 與 E

相關文章 - Angular Directive

AngularJS 指令限制 `A` 與 `E`