AngularJS (6) directive 基本介紹
directive，宣告子，讓我們自定屬性、標籤、或是CSS樣式。
- <div my-dir>
- <my-dir>
- <div class="my-dir">
目前我知道的，宣告子用來匯入外部HTML、綁定javascript事件如滑鼠或鍵盤、和控制器溝通。 宣告子的命名方式，在javascript用駝峰式大小寫(camel-case)。
- "myDir"
在HTML建議用破折號(dash-delimited format)。
- <my-dir>
先來看自定屬性的宣告方式，下篇再聊如何自定標籤和自定CSS。
一個宣告子
(Plunkr)
我們想要印出"Hello world!!"字樣，首先在<head>宣告了my-greet。
<head>
<script>
var app1 = angular.module("app1",[]);
app1.directive('myGreet', function(){
return {
template: "Hello world!!"
};
});
</script>
</head>
在<body>呼叫自定屬性的myGreet，在HTML改稱為my-greet。
<body ng-app="app1">
<div my-greet></div>
</body>
一個宣告子和一個控制器
宣告子可以使用控制器的變數。正確來說，宣告子沿用控制器的scope。
我們改寫上例，用控制器儲存名字"Lily"。
<body ng-app="app1">
<div ng-controller="HelloController">
<div my-greet></div>
</div>
</body>
<head>
<script>
var app1 = angular.module("app1",[]);
app1.controller("HelloController",
['$scope',function($scope){
$scope.name = "Lily";
}]);
app1.directive('myGreet', function(){
return {
template: 'Hello world!! I am {{name}}'
};
});
</script>
</head>
※控制器也可以用一般宣告方式
app1.controller('HelloController',function($scope){
$scope.name = 'Lily';
});
一個宣告子和兩個控制器
(Plunkr)
前一段說過，宣告子沿用控制器的scope，在這個例子就更能看出來。
這次，我們除了印出"Lily"，再加上第二個控制器印出"Ihc"
app1.controller("HelloController",['$scope',function($scope){
$scope.name = "Lily";
}]);
app1.controller("HelloController2",['$scope',function($scope){
$scope.name = "Ihc";
}]);/*新增*/
改寫一下HTML，在HelloController2呼叫mg-greet
<body ng-app="app1">
<div ng-controller="HelloController">
<div my-greet></div>
</div>
<div ng-controller="HelloController2">
<div my-greet></div>
</div>
</body>
有趣吧！^_^
留言
張貼留言