第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>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏码匠的流水账

聊聊storm trident的state

storm-2.0.0/storm-client/src/jvm/org/apache/storm/trident/state/StateType.java

701
来自专栏小狼的世界

Javascript设计模式学习(二)封装续

有一个避免其他程序员无意间写出重名函数的办法,在你想作为私有属性或者私有方法的命名前加一个下划线,像这样 this._name = name;,这样虽然不能避免...

1488
来自专栏机器学习与自然语言处理

04-树6. Huffman Codes--优先队列(堆)在哈夫曼树与哈夫曼编码上的应用

题目来源:http://www.patest.cn/contests/mooc-ds/04-%E6%A0%916 In 1953, David A. Huffm...

2817
来自专栏ml

初学Java之Pattern与Matcher类

import java.util.regex.*; public class Gxjun{ public static void main(St...

2887
来自专栏ml

C plus plus 控制格式

使用这些格式需要声明包含<iomainip> long flags( ) const 返回当前的格式标志。 long flays(long newflag) 设...

2184
来自专栏编程之旅

Swift中的"警卫队"

大半个月没有更新自己的博客了,最近在忙一个新项目时间非常紧张,所以最近的博客更新进度就要稍微放缓一点了。

801
来自专栏运维小白

Linux基础(day29)

sed扩展 一. 打印某行到某行之间的内容 打印某一行到某一行之间的内容 需求: 例如:有个文件test的内容如下: ert fff ** [abcfd] 1...

1979
来自专栏java达人

js的回调函数详解

在Javascript中,函数是第一类对象,这意味着函数可以像对象一样按照第一类管理被使用。既然函数实际上是对象:它们能被“存储”在变量中,能作为函数参数被传递...

3325
来自专栏一个会写诗的程序员的博客

Kotlin 简单优雅的高阶函数Kotlin 简单优雅的高阶函数《Kotlin极简教程》正式上架:1 . Kotlin 函数式编程: 函数的组合。一切皆是函数。2. 简单好用的 Kotlin 类型别名

函数代表一种关系 f 的蕴涵逻辑流。这种蕴涵逻辑流,其实就是映射(Mapping)。

1103
来自专栏开发与安全

从零开始学C++之模板(二):类模板、Stack的类模板实现(自定义链栈方式,自定义数组方式)

一、类模板 类模板:将类定义中的数据类型参数化 类模板实际上是函数模板的推广,可以用相同的类模板来组建任意类型的对象集合 (一)、类模板的定义 templ...

2290

扫码关注云+社区

领取腾讯云代金券