<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body ng-app="myApp1">
<btn primary="true" lg block></btn>
<script src="./js/Angular.js"></script>
<script>
var myApp1 = angular.module('myApp1', []);
//第一個參數是指令的名字 第二個參數應該使用一個數組
//數組的最後一個元素是一個函數
myApp1.directive('btn', [function() {
return {
scope: {
primary: '@',
lg: '@',
block: '@'
},
//指令對象的屬性
transclude: true,
template: '<button class="btn{{primary?\'btn-primary\':\'\'}}">button</button>'
}
}])
</script>
</body>
</html>
運行結果
