那我們來談談，如何自訂Directive吧
好啊，這個有趣，我最喜歡創造東西了
嘖嘖..
前置提醒：
在命名指令，你必須使用一個駝峰的名字，EX:testDirectives
但使用它的時候，必須使用-分隔符號，test-directive
restrict 可以讓決定directive要以何種方式宣告，像是元素、屬性、類別、註解
template 用字串的方式編寫HTML，使用該Directive的元素將會替換為這裡指定的HTML
並使用以下格式
.directive('directiveName', function(){ });
retrict選項：
E 元素物件element
以元素的方式使用Directive
<directiveName></directiveName>
A 屬性Attribute
以屬性的方式使用Directive
<div directiveName></div>
C 類別Class
以類別的方式使用Directive
<div class='directiveName'></div>
M 註解Comment
以註解的方式使用Directive
<!-- directive: directiveName -->
testDirective(這邊使用EC的方式做示範)
(JS Bin:https://jsbin.com/codevoxala/1/edit?html,js,output)
Step1.首先建立一個module
var app = angular.module('app',[]);
Step2.接著加入.directive方式，directiveName為testDirective
app.directive("testDirective", function() { });
Step3.然後，在function內加入要回傳的方法
return {
restrict: 'EC',
template : "<h1>Hello</h1>”
};
Step4.而在HTML的部分，加入我們要呈現的Code
<body>
<test-directive></test-directive>
<div class='test-directive'></div>
</body>
呈現畫面如下：
參考資訊：
http://www.w3schools.com/angular/angular_directives.asp
https://docs.angularjs.org/guide/directive
好啦，就簡易的敘說到這就好啦～
應該夠你這只會吃「飯粒」的慢慢吸收了～
你！再！給！我！說！一！次！
誰是吃飯粒的！！！
你啊，不然還有誰，哈哈哈！
iThome鐵人賽
看影片追技術