第216天：Angular---自定义指令（二）
自定义指令
1、第一个参数是指令的名字，第二个参数任然应该使用一个数组，数组的最后一个元素是一个函数。定义指令的名字，应该使用驼峰命名法
<!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">
<!-- <newsButton></newsButton> -->
<!-- <news-button></news-button> -->
<!-- <div newsButton></div> -->
<btn-primary></btn-primary>
<btn-danger></btn-danger>
<script src="bower_components/angular/angular.js"></script>
<script>
var demoApp = angular.module('demoApp', []); // 第一个参数是指令的名字，第二个参数任然应该使用一个数组，数组的最后一个元素是一个函数
// 定义指令的名字，应该使用驼峰命名法
demoApp.directive('newsButton', [function() {
// 该函数应该返回一个指令对象
return {
template:'<input type="button" value="news" class="btn btn-lg btn-primary btn-block" />'
};
}]); // demoApp.directive('btnPrimary', [function() {
// return {
// template:'<input type="button" value="news" class="btn btn-primary" />'
// };
// }]); // demoApp.directive('btnDanger', [function() {
// return {
// template:'<input type="button" value="news" class="btn btn-danger" />'
// };
// }]); // demoApp.directive('btnSuccess', [function() {
// return {
// template:'<input type="button" value="news" class="btn btn-success" />'
// };
// }]); demoApp.controller('DemoController', ['$scope', function($scope) {
// $scope.xxxx=xxx;
// $scope.do=function() { // };
// $scope.$watch('',function(now,old) { // });
}]);
</script>
</body> </html>
2、自定义一个面包屑导航
<!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>
3、面包屑导航
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>封装一个面包屑导航</title>
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css">
</head> <body ng-app="myApp" ng-controller="DemoController">
<breadcrumb data="{{pathData1}}"></breadcrumb>
<breadcrumb data="{{pathData2}}"></breadcrumb>
<script src="bower_components/angular/angular.js"></script>
<script>
var myApp = angular.module('myApp', []); myApp.controller('DemoController', ['$scope', function($scope) {
$scope.pathData1 = {
home: '#',
news: '#',
itheima: '#',
bbs: '#'
};
$scope.pathData2 = {
home: '#',
library: '#',
data: '#'
};
}]); // 定义一个面包屑导航指令
myApp.directive('breadcrumb', [function() {
// 返回指令对象
return {
scope: {},
templateUrl: 'tmpls/breadcrumb.html',
replace: true,
link: function(scope, element, attributes) {
scope.data = JSON.parse(attributes.data);
// console.log(scope.data);
}
};
}]);
</script>
</body> </html>
第216天：Angular---自定义指令（二）的更多相关文章
- Angular自定义指令（directive）
angular自定义指令,意我们可以通过angula自己定义指令,来实现我们的特殊要求,为所欲为,一支穿云箭,千军万马来相见 多少年的老规矩了,先看代码: <!DOCTYPE html> ...
- angular 自定义指令详解 Directive
在angular中,Directive,自定义指令的学习,可以更好的理解angular指令的原理,当angular的指令不能满足你的需求的时候,嘿嘿,你就可以来看看这篇文章,自定义自己的指令,可以满足 ...
- Angular自定义指令directive:scope属性
在AngularJS中,除了内置指令如ng-click等,我们还可以自定义指令.自定义指令,是为了扩展DOM元素的功能.代码中,通过指定directive中的restrict属性,来决定这个指令是作为 ...
- angular 自定义指令 directive transclude 理解
项目中断断续续的用了下angular,也没狠下心 认真的学习.angular 特别是自定义指令这块 空白. transclude 定义是否将当前元素的内容转移到模板中.看解释有点抽象. 看解释有点抽象 ...
- Angular17 Angular自定义指令
1 什么是HTML HTML文档就是一个纯文本文件,该文件包含了HTML元素.CSS样式以及JavaScript代码:HTML元素是由标签呈现,浏览器会为每个标签创建带有属性的DOM对象,浏览器通过渲 ...
- angular自定义指令
1.在directive文件下创建指令的js文件 通常自定义指令需要声明模块(注意定义指令时, js内部指令名称需采用 aaAaBb驼峰的命名方式 html中使用的是aa-aa-bb) e.g (f ...
- angular -- 自定义指令和模板
angular 可以自定义一些指令,来简化我们前端的工作量. 第一种:简单指令示例: <h3>自定义指令</h3> <sheng></sheng> &l ...
- angular自定义指令命名的那个坑
Directive 先从定义一个简单的指令开始. 定义一个指令本质上是在HTML中通过元素.属性.类或注释来添加功能.AngularJS的内置指令都是以ng开头,如果想自定义指令,建议自定义一个前缀代 ...
- angular自定义指令相关知识及代码
原文地址 https://www.jianshu.com/p/0c015862156d 大纲 1.自定义指令之——属性指令 2.自定义属性指令的运行原理 3.自定义属性指令代码实践 4.自定义结构指令 ...
- angular自定义指令 repeat 循环结束事件；limitTo限制循环长度、限定开始位置
1.获取repeat循环结束: 自定义指令: .directive('repeatFinish', function () { return { link: function (scope, elem ...
随机推荐
- 微信小程序——手把手教你写一个微信小程序
前言 微信小程序年前的跳一跳确实是火了一把,然后呢一直没有时间去实践项目,一直想搞但是工作上不需要所以,嗯嗯嗯嗯嗯emmmmm..... 需求 小程序语音识别,全景图片观看,登录授权,获取个人基本信息 ...
- Vue实例 中的常用配置项
创建Vue实例时,使用 new Vue ({//配置项}) 或者 组件定义中 export default {//配置项},所有的Vue组件都是Vue实例,并且接受相同的选项对象(一些根实例特有的选项 ...
- MyEclipse断点调试不可用解决办法
前言:MyEclipse中出现Debug调试不可用,断点处出现斜线.那么,如何解决此类问题? 1.打开myeclipse软件(版本不限) 2.设置断点,出现如下图所示情况,断点处出现斜线. 3.修改方 ...
- java项目部署之后,Jar包中配置文件修改
Java项目发布时,配置文件不像.net项目一样与工程路径保持一致,而是直接包含在了jar包中,此时要修改就没那么方便了,我们可以将配置文件从jar包抽离出来,修改完之后再写入Jar包即可, 也没那么 ...
- 学习python,第四篇：Python 3中bytes/string的区别
原文:http://eli.thegreenplace.net/2012/01/30/the-bytesstr-dichotomy-in-python-3 python 3中最重要的新特性可能就是将文 ...
- Netty源码分析第8章(高性能工具类FastThreadLocal和Recycler)---->第4节: recycler中获取对象
Netty源码分析第八章: 高性能工具类FastThreadLocal和Recycler 第四节: recycler中获取对象 这一小节剖析如何从对象回收站中获取对象: 我们回顾上一小节demo的ma ...
- 软件RAID
软件RAID也必须在多磁盘系统中才能实现.实现RAID1最少要拥有两块硬盘,而实现RAID5则最少要拥有三块硬盘.通常情况下,操作系统所在磁盘采用RAID1,而数据所在磁盘采用RAID5. 卷的类 ...
- RabbitMQ和Kafka,更加便捷高效的消息队列使用方式，请放心食用
一.RabbitMQ实例介绍RabbitMQ实例由华为云分布式消息服务(DMS)团队打造,实例采用物理隔离的方式部署,租户独占RabbitMQ实例.一键式部署,完全兼容开源RabbitMQ的使用方式, ...
- word2vec的理解
在学习LSTM的时候,了解了word2vec,简单的理解就是把词变成向量.看了很多书,也搜索了很多博客,大多数都是在word2vec的实现原理.数学公式,和一堆怎么样重新写一个word2vec的pyt ...
- eclipse xml文件中按alt+/没有提示信息
转载地址:http://blog.sina.com.cn/s/blog_972ddc1b01012mmh.html 今天要写这篇博文是因为遇到这样的不是技术的问题,但找到问题根源再解决这个问题又花费很 ...