第216天：Angular—自定義指令（二）

半指溫柔樂發表於2018-04-09
Angular

自定義指令

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>

 


相關文章