第216天：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>本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2018-04-09 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录