自定义指令
1、第一个参数是指令的名字，第二个参数任然应该使用一个数组，数组的最后一个元素是一个函数。定义指令的名字，应该使用驼峰命名法
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title>Document</title> 7 <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css"> 8 </head> 9 10 <body ng-app="demoApp"> 11 <!-- <newsButton></newsButton> --> 12 <!-- <news-button></news-button> --> 13 <!-- <div newsButton></div> --> 14 <btn-primary></btn-primary> 15 <btn-danger></btn-danger> 16 <script src="bower_components/angular/angular.js"></script> 17 <script> 18 var demoApp = angular.module('demoApp', []); 19 20 // 第一个参数是指令的名字，第二个参数任然应该使用一个数组，数组的最后一个元素是一个函数 21 // 定义指令的名字，应该使用驼峰命名法 22 demoApp.directive('newsButton', [function() { 23 // 该函数应该返回一个指令对象 24 return { 25 template:'<input type="button" value="news" class="btn btn-lg btn-primary btn-block" />' 26 }; 27 }]); 28 29 30 // demoApp.directive('btnPrimary', [function() { 31 // return { 32 // template:'<input type="button" value="news" class="btn btn-primary" />' 33 // }; 34 // }]); 35 36 // demoApp.directive('btnDanger', [function() { 37 // return { 38 // template:'<input type="button" value="news" class="btn btn-danger" />' 39 // }; 40 // }]); 41 42 // demoApp.directive('btnSuccess', [function() { 43 // return { 44 // template:'<input type="button" value="news" class="btn btn-success" />' 45 // }; 46 // }]); 47 48 demoApp.controller('DemoController', ['$scope', function($scope) { 49 // $scope.xxxx=xxx; 50 // $scope.do=function() { 51 52 // }; 53 // $scope.$watch('',function(now,old) { 54 55 // }); 56 }]); 57 </script> 58 </body> 59 60 </html>
2、自定义一个面包屑导航
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title>Document</title> 7 <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css"> 8 </head> 9 10 <body ng-app="demoApp"> 11 <!-- <btn>itcast</btn> --> 12 <div breadcrumb></div> 13 <breadcrumb data=""></breadcrumb> 14 <script src="bower_components/angular/angular.js"></script> 15 <script> 16 var demoApp = angular.module('demoApp', []); 17 18 19 demoApp.directive('breadcrumb', [function() { 20 // Runs during compile 21 return { 22 // 指定当前指令的类型什么样的 23 // restrict: 'EA', 24 // // E = Element, A = Attribute, C = Class, M = Comment 25 // template: '', // 模版字符串 26 templateUrl: 'tmpls/breadcrumb.html', 27 replace: true, 28 // transclude: true, 29 }; 30 }]); 31 32 // demoApp.directive('btn', [function() { 33 // return{ 34 // scope:{ 35 // primary:'@', 36 // lg:'@', 37 // block:'@', 38 // }, 39 // template:'<button class="btn {{primary==\'true\'?\'btn-primary\':\'\'}}">button</button>' 40 // } 41 // }]); 42 43 // demoApp.directive('btn', [function() { 44 // return { 45 // // 指令对象的transclude必须设置为true才可以在模版中使用ng-transclude指令 46 // transclude: true, 47 // replace: true, // 替换指令在HTML中绑定的元素 48 // template: '<button class="btn btn-primary btn-lg" ng-transclude></button>' 49 // }; 50 // }]); 51 </script> 52 </body> 53 54 </html>
3、面包屑导航
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title>封装一个面包屑导航</title> 7 <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css"> 8 </head> 9 10 <body ng-app="myApp" ng-controller="DemoController"> 11 <breadcrumb data="{{pathData1}}"></breadcrumb> 12 <breadcrumb data="{{pathData2}}"></breadcrumb> 13 <script src="bower_components/angular/angular.js"></script> 14 <script> 15 var myApp = angular.module('myApp', []); 16 17 myApp.controller('DemoController', ['$scope', function($scope) { 18 $scope.pathData1 = { 19 home: '#', 20 news: '#', 21 itheima: '#', 22 bbs: '#' 23 }; 24 $scope.pathData2 = { 25 home: '#', 26 library: '#', 27 data: '#' 28 }; 29 }]); 30 31 // 定义一个面包屑导航指令 32 myApp.directive('breadcrumb', [function() { 33 // 返回指令对象 34 return { 35 scope: {}, 36 templateUrl: 'tmpls/breadcrumb.html', 37 replace: true, 38 link: function(scope, element, attributes) { 39 scope.data = JSON.parse(attributes.data); 40 // console.log(scope.data); 41 } 42 }; 43 }]); 44 </script> 45 </body> 46 47 </html>
