AngularJS (7) directive 自定元素

directive的基本介紹有提到，directive宣告子可以讓我們

注意到自定元素不同於自定屬性，可以直接當作<...>。但其實，自定元素只要比自定屬性多一個restrict參數就好了！

官方的宣告子說明提到，預設宣告子只可以自定屬性，所以若是要自定元素或是CSS樣式，必須要修改restrict。以下為restrict的選項：

也可以合併使用

先看看用自定屬性印出"Hello world!!"的例子

<body ng-app="app1">
    <div my-greet></div>
</body>

自定屬性的宣告方式

var app1 = angular.module("app1",[]);
app1.directive('myGreet', function(){
   return {
     template: "Hello world!!"
   };
});

要改成自定元素啦！把return裡面加上參數restrict，指定宣告子myGreet是自定元素。

   return {
     restrict:'E',
     template: "Hello world!!"
   };

修改一下HTML

<body ng-app="app1">
    <!-- <div my-greet></div> 這是自定屬性-->
    <my-greet>
</body>

完成！

Ti-Tiâu