<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css">
</head>
<body ng-app="demoApp">
<!-- <btn>itcast</btn> -->
<div breadcrumb></div>
<breadcrumb data=""></breadcrumb>
<script src="bower_components/angular/angular.js"></script>
<script>
var demoApp = angular.module('demoApp', []);
demoApp.directive('breadcrumb', [function() {
// Runs during compile
return {
// 指定當前指令的類型什麼樣的
// restrict: 'EA',
// // E = Element, A = Attribute, C = Class, M = Comment
// template: '', // 模版字符串
templateUrl: 'tmpls/breadcrumb.html',
replace: true,
// transclude: true,
};
}]);
// demoApp.directive('btn', [function() {
// return{
// scope:{
// primary:'@',
// lg:'@',
// block:'@',
// },
// template:'<button class="btn {{primary==\'true\'?\'btn-primary\':\'\'}}">button</button>'
// }
// }]);
// demoApp.directive('btn', [function() {
// return {
// // 指令對象的transclude必須設置爲true纔可以在模版中使用ng-transclude指令
// transclude: true,
// replace: true, // 替換指令在HTML中綁定的元素
// template: '<button class="btn btn-primary btn-lg" ng-transclude></button>'
// };
// }]);
</script>
</body>
</html>
Angualr中自定義指令模板
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章