AngularJS - 自定義指令

你好，未來的AngularJS巫師們！今天，我們將踏上一段令人興奮的旅程，進入自定義指令的世界。別擔心如果你是編程新手 - 我將成為你的友好導遊，我們會一步步來。在本教程結束時，你將能夠像專業人士一樣創建自己的自定義指令！

AngularJS - Custom Directives

理解自定義指令

什麼是指令？

在AngularJS的神奇領域中，指令就像是一種特殊法術，告訴我們的HTML如何行為。它是一種擴展HTML以新增屬性和元素的方式，賦予它超能力！

想像你正在建造一個房子（你的網頁應用程序）。標準的HTML元素就像是你基本的建築積木 - 砖頭、窗戶、門。但如果你想要一些特別的東西，比如一個秘密陷阱門或一個旋轉書架呢？這就是自定義指令的用處！

為什麼使用自定義指令？

可重用性：創建一次，到處使用！
封裝性：將相關功能保持在一起。
可讀性：讓你的代碼更容易理解。
模塊性：將你的應用程序分解成更小的、易於管理的部分。

現在，讓我們捋起袖子，深入創建我們的第一個自定義指令！

範例：創建一個簡單的自定義指令

步驟1：設定我們的AngularJS應用程序

首先，我們來創建一個基本的AngularJS應用程序。別擔心，這比你想像的要容易！

<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>我的第一個自定義指令</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body>
<div ng-controller="MyController">
<!-- 我們將在這裡添加我們的自定義指令 -->
</div>

<script>
var app = angular.module('myApp', []);
app.controller('MyController', function($scope) {
// 我們將在這裡添加控制器邏輯
});
</script>
</body>
</html>

這樣就設定了一個名為'myApp'的基本AngularJS應用程序，並帶有一個名為'MyController'的控制器。將控制器看作是我們應用的腦袋。

步驟2：創建我們的自定義指令

現在，讓我們添加我們的自定義指令。我們將創建一個簡單的問候指令。

app.directive('myGreeting', function() {
return {
restrict: 'E',
template: '<h1>你好，{{name}}！</h1>',
scope: {
name: '@'
}
};
});

讓我們分解這段代碼：

app.directive('myGreeting', function() { ... })：這創建了一個名為'myGreeting'的新指令。
restrict: 'E'：這告訴AngularJS我們的指令將作為一個新的HTML元素使用。
template: '<h1>你好，{{name}}！</h1>'：這是我們指令的HTML模板。
scope: { name: '@' }：這為我們的指令創建了一個隔離作用域，帶有一個我們可以傳入的'name'屬性。

步驟3：使用我們的自定義指令

現在，讓我們在我們的HTML中使用我們閃亮的新指令：

<div ng-controller="MyController">
<my-greeting name="世界"></my-greeting>
</div>

輸出

當你運行這段代碼時，你將看到：

你好，世界！

恭喜你！你剛剛創建並使用了你的第一個自定義指令！

高級自定義指令功能

現在我們已經掌握了基本知識，讓我們探討一些自定義指令的更高级功能。

帶有控制器的指令

我們可以在指令中添加一個控制器以实现更复杂的行为：

app.directive('myAdvancedGreeting', function() {
return {
restrict: 'E',
template: '<h2>{{greeting}}，{{name}}！</h2>',
scope: {
name: '@'
},
controller: function($scope) {
var greetings = ['你好', '嗨', '嘿', '嗨喲'];
$scope.greeting = greetings[Math.floor(Math.random() * greetings.length)];
}
};
});

每次使用此指令時，它都會隨機選擇一個問候：

<my-advanced-greeting name="AngularJS學習者"></my-advanced-greeting>

你可能會看到：

嗨喲，AngularJS學習者！

或者：

嗨，AngularJS學習者！

帶有鏈接函數的指令

鏈接函數是你可以操作DOM的地方：

app.directive('myColorfulGreeting', function() {
return {
restrict: 'E',
template: '<h3>你好，{{name}}！</h3>',
scope: {
name: '@'
},
link: function(scope, element, attrs) {
var colors = ['紅色', '藍色', '綠色', '紫色', '橙色'];
var randomColor = colors[Math.floor(Math.random() * colors.length)];
element.css('color', randomColor);
}
};
});

此指令會以隨機顏色顯示問候：

<my-colorful-greeting name="多彩世界"></my-colorful-greeting>

方法總表

以下是我們在自定義指令中使用的主要方法的總結：

方法	描述
`restrict`	指定指令如何使用（E: 元素，A: 屬性，C: 類別，M: 註釋）
`template`	定義指令的HTML模板
`scope`	為指令創建隔離作用域
`controller`	為指令定義控制器
`link`	允許直接操作DOM並為指令添加行為

結論

恭喜你！你剛剛踏入了AngularJS自定義指令的奇妙世界。我們已經覆蓋了創建簡單指令的基本知識，甚至還涉獵了一些控制器和鏈接函數的進階概念。

記住，創建自定義指令就像學習一種新的超能力 - 它需要練習，但一旦你掌握了它，你就能够為你的網頁應用程序創建出令人驚奇的動態和可重用組件。

持續實驗，持續學習，最重要的是，玩得開心！AngularJS的世界是廣闊而令人興奮的，現在的你已經裝備好去進一步探索它了。祝你編程愉快，未來的AngularJS大師！

Credits: Image by storyset