Angular的自定义指令以及实例
/xiaoxie53/p/5058198.html
前面的文章介绍了很多angular自带的指令，下面我们看看如何使用directive自定义指令。
先看一个例子：
&div my-hello&&/div&
&script type=&text/javascript&&
var m1 = angular.module('myApp',[]);
m1.directive('myHello',function(){
restrict : 'A',
replace : true,
template : '&div&hello angular&/div&'
1：我们定义了一个my-hello的指令。
2：使用directive完善这个指令，返回一个对象。有三个值：
　　a) ：restrict共四个值：E：标签指令，C：class指令，M：注释指令，A：属性指令
　　　　如何使用 ？
　　b)：replace是否替换（M注释必须为true才能解析）看图：
　　　　true：
　　　　false：
&　　c)：template内容，除此之外还有templateUrl，指定一个html模板文件。
下面再举个例子：
&div ng-controller=&Aaa&&
&div my-tab my-id=&div1& my-name=&name& my-fn=&show(num)& class=&J-tab&&&/div&
&div my-tab my-id=&div2& my-name=&name& my-fn=&show(num)& class=&J-tab&&&/div&
&script type=&text/javascript&&
var m1 = angular.module('myApp',[]);
m1.controller('Aaa',['$scope',function($scope){
$scope.name = 'xiecg';
$scope.age = 18;
$scope.show = function(num){
console.log(num);
m1.directive('myTab',function(){
restrict : 'ECMA',
replace : true,
//替换的方式插入内容//绑定策略
myId : '@',
//解析普通字符串
myName : '=',
//解析数据
myFn : '&'
controller : ['$scope',function($scope){
//共享数据存放在这里
$scope.name = 'this is a xiecg';
template : '&div id=&{{myId}}&&\
&input type=&button& value=&1& class=&active& ng-click=&myFn({num:456})&&\
&input type=&button& value=&2&&\
&input type=&button& value=&3&&\
&div style=&display:&&{{myName}}&/div&\
&div&2222&/div&\
&div&3333&/div&\
1：scope默认是false，为true表示独立作用域。
2：scope给予一个对象时，表示执行绑定策略，在template上调用这些数据。
　　a)：我们在DOM元素上my-id，我们使用@符号，表示解析普通字符串，说白了就是你写什麽就是什麽。
　　b)：使用=符号，表示解析数据。
　　c)：使用&符号，表示这绑定一个函数。
3：controller，表示绑定指令内部使用的数据。
好，下面来继续完善这个tab切换的例子！
完整代码：
&!DOCTYPE HTML&
&html ng-app=&myApp&&
&meta http-equiv=&Content-Type& content=&text/ charset=utf-8& /&
&title&Tab选项卡实例&/title&
&style type=&text/css&&
.J-tab .active{background-color:#03A9F4;}
.J-tab div{display:}
&script type=&text/javascript& src=&js/jquery-1.11.1.js&&&/script&
&script type=&text/javascript& src=&js/angular.min.js&&&/script&
&div ng-controller=&Aaa&&
&my-tab my-id=&div1& my-data=&sports& class=&J-tab&&&/my-tab&
&my-tab my-id=&div2& my-data=&time& class=&J-tab&&&/my-tab&
&script type=&text/javascript&&
var m1 = angular.module('myApp',[]);
m1.controller('Aaa',['$scope',function($scope){
$scope.sports = [
{title : '篮球',content : ''},
{title : '足球',content : ''},
{title : '排球',content : ''}
$scope.time = [
{title : '上午',content : ''},
{title : '中午',content : ''}
m1.directive('myTab',function(){
restrict : 'E',
replace : true,
myId : '@',
myData : '='
controller : ['$scope',function($scope){
$scope.name = 'this is a xiecg';
template : '&div id=&{{myId}}&&\
&input ng-repeat=&data in myData& type=&button& ng-value=&data.title& ng-class=&{active:$first}&&\
&div ng-repeat=&data in myData& ng-style=&{display:$first?\'block\':\'none\'}&&{{data.content}}&/div&\
link : function(scope,element,attr){
element.on('click','input',function(){
var self = $(this) , i = self.index();
self.addClass('active').siblings('input').removeClass('active');
self.siblings('div').eq(i).show().siblings('div').hide();
&link属性，表示当directive被angular编译后，执行该方法。这个方法接受三个参数，
a)：scope表示controller下面的数据。
b)：element表示当前的DOM元素。
c)：attr表示这个DOM元素上的自定义属性。
在实际的开发过程中我们往往需要嵌套各种组件和指令。下面来介绍directive中的transclude和require。
&!DOCTYPE HTML&
&html ng-app=&myApp&&
&meta http-equiv=&Content-Type& content=&text/ charset=utf-8& /&
&title&自定义指令间的互相交互&/title&
&script type=&text/javascript& src=&js/angular.min.js&&&/script&
&script type=&text/javascript&&
var m1 = angular.module('myApp',[]);
m1.directive('hello',function(){
restrict : 'E',
replace : true,
transclude : true,
//允许自定义指令的嵌套，通过ng-transclude指定嵌套的范围
controller : function($scope){
$scope.name = 'xiecg';
this.name = 'xiecg';
//使用this共享给其他指令
template : '&div&hello angular &h1 ng-transclude&&/h1&&/div&'
m1.directive('hi',function(){
restrict : 'E',
replace : true,
require : '^hello',//hello指令属性hi指令的父级，需要用^符号指定。如果无法指定，使用?容错处理。
template : '&span&hi angular {{name}}&/span&',
link : function(scope,element,attr,reController){
console.log(reController);
//得到父级hello指令中共享出来的数据
看过本文的人也看了：
我要留言技术领域：
取消收藏确定要取消收藏吗？
删除图谱提示你保存在该图谱下的知识内容也会被删除，建议你先将内容移到其他图谱中。你确定要删除知识图谱及其内容吗？
删除节点提示无法删除该知识节点，因该节点下仍保存有相关知识内容！
删除节点提示你确定要删除该知识节点吗？&>&&>&&>&&>&JS实现Tab内容切换，页面不刷新，内容切换，网址变化
JS实现Tab内容切换，页面不刷新，内容切换，网址变化
上传大小：58KB
JS实现Tab内容切换，页面不刷新，内容切换，网址对应变化，效果非常好。
综合评分：4.8（5位用户评分）
收藏（(1)）
所需积分：1
下载次数：92
审核通过送C币
创建者：hbwang_716
创建者：yp2008gf
创建者：luoruiyuan_1
课程推荐相关知识库
上传者其他资源上传者专辑
开发技术热门标签
VIP会员动态
android服务器底层网络模块的设计方法
所需积分：0
剩余积分：720
您当前C币：0
可兑换下载积分：0
兑换下载分：
兑换失败，您当前C币不够，请先充值C币
消耗C币：0
你当前的下载分为234。
JS实现Tab内容切换，页面不刷新，内容切换，网址变化
会员到期时间：
剩余下载次数：
你还不是VIP会员
开通VIP会员权限，免积分下载
你下载资源过于频繁，请输入验证码
你下载资源过于频繁，请输入验证码
您因违反CSDN下载频道规则而被锁定帐户，如有疑问，请联络:!
若举报审核通过，可奖励20下载分
被举报人：
xhreaishengming
举报的资源分：
请选择类型
资源无法下载
资源无法使用
标题与实际内容不符
含有危害国家安全内容
含有反动色情等内容
含广告内容
版权问题，侵犯个人或公司的版权
*详细原因：JS实现的tab切换
为鼓励上传资源，我们采用积分下载方式，希望您能发布更多更好的资源互相分享
1.上传软件或电子书,源码,资料等,审核后即获2积分;如发布时设了下载需积分，其他用户下载后你将获得相应积分
2.当您首次注册时，可以获送10个下载积分，供您下载资源和熟悉网站下载的使用
3.发现资源有误或其他问题，通过举报按钮反馈后我们将奖励积分
4.您可以在论坛通过发帖等方式获取
5.参加本站可以在有效期内不限次数下载
6.您也（1元=10积分）或
7.我们会不定期举办各种活动，参加活动可以获取积分，请关注下载频道首页公告。
您可能遇到这些“伪问题”：
1.资料无法解压：
请确保所有分卷均下载完毕，如果有未知后缀文件，请搜索相应解压软件；
2.chm文件无内容：
您的电脑锁定了这一文件，请右击文件属性，点击右下方“解除锁定”，关闭文件后再打开；
3.下载不下来：
请尝试重新下载（重新下载不扣积分）；
4.杀毒软件报毒：
黑客安全及破解类软件容易报毒，但可正常使用，如担心安全请谨慎使用。
script实现的tab切换
Javascript实现的tab切换
您对本软件有什么意见或着疑问吗？请到您的关注和建议是我们前行的参考和动力
下载地址：
您正在下载：JS实现的tab切换
热门最新推荐
(window.slotbydup=window.slotbydup || []).push({
id: '2467141',
container: s,
size: '1000,90',
display: 'inlay-fix'
您的浏览器不支持嵌入式框架，或者当前配置为不显示嵌入式框架。
(window.slotbydup=window.slotbydup || []).push({
id: '2467142',
container: s,
size: '1000,90',
display: 'inlay-fix'
(window.slotbydup=window.slotbydup || []).push({
id: '2467143',
container: s,
size: '1000,90',
display: 'inlay-fix'
(window.slotbydup=window.slotbydup || []).push({
id: '2467148',
container: s,
size: '1000,90',
display: 'inlay-fix'