angulaijs指令封装

最新推荐文章于 2024-06-04 15:27:50 发布

xhliangailx163

最新推荐文章于 2024-06-04 15:27:50 发布

阅读量305

点赞数

分类专栏：前端 angularjs 文章标签： directive

本文链接：https://blog.csdn.net/xhliangailx163/article/details/70946166

版权

前端 angularjs 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一自定义指令

angular.module下有方法controller run filter directive等，directive用来自定义指令其下面有很多方法，

restrict

replace

template

templateUrl

link

controller

1Restrict可以取4个值ACME 属性类注释元素

2Template模版

3Replace：true时用模版替换应用到指令的地方。当不写时注释是不被显示的，而其他的会被显示。

4当模版中内容过多可以指定外部文件（可以直接写内容不用写头文件等）

注意：1指令的js文件不要在重新定义var m1=angular.module('myApp',[]);

2注意在指令js中利用驼峰式，而在html中利用的是连字符式

3注释时注意前后都需要有空格

4当replace为true和不写时分别显示不同

5模版URL时注意：1多行字符串不能换行利用\拼接，写到模版中直接写内容

2不要写头文件等的东西

二封装选向卡指令

指令需要能够复用的，这样就能够涉及到作用域的问题。

1 scope默认为false，标签之间作用域是共享的当为true时各个标签是独立的作用域，不相互影响

2 scope值为｛｝，隔离作用域不再和外层作用域之间有联系，只在当前标签起作用，

3scope值为｛@/=/&｝绑定策略@（如实现模版不同div的id，传递参数）当第二个标签中没有初始化时，controller中的变量会被找到。

<!DOCTYPE HTML>
<html ng-app="myApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
#div1 div,#div2 div{ width:200px; height:200px; border:1px red solid; display:none;}
#div1 input.active , #div2 input.active{ background:red;}
</style>
<script src="angular.min.js"></script>
<script>

var m1 = angular.module('myApp',[]);
m1.directive('myTab',function(){
   return {
      restrict : 'E',   
      replace : true,
      //scope : true,
      scope : {
         myId : '@',//绑定固定字符串
         myName : '=',//将字符串看成变量进行查找
         myFn : '&'//绑定父级函数
      },
      controller : ['$scope',function($scope){
         $scope.name = 'miaov';
      }],
      templateUrl : 'temp2.html'
   };
});

m1.controller('Aaa',['$scope',function($scope){
   
   $scope.name = 'hello';
   $scope.show = function(n){
      alert(n);
   };
   
}]);

</script>
</head>

<body ng-controller="Aaa">
<my-tab my-id="div1" my-name="name" my-fn="show(num)"></my-tab>
<my-tab my-id="div2" my-name="name" my-fn="show(num)"></my-tab>
</body>
</html>

变量先内层找在外层。

即使如此继承还是会产生一定的影响，提出了隔离作用域，不会受到外层影响，想标签内的ng-init以及controller中的数据均属于外部数据不会被找到。

那怎样在模版中绑定数据呢？提供了controller专门为自定义指令内部数据绑定方式，controller中是共享的数据，由于模版中的数据id相同，会产生两个id相同的div，是不可行的，于是针对隔离作用域提出了相应的绑定策略。根据绑定策略可以将参数传递到模版中，并进行接收等

（1）绑定策略@ 传入的数据就是作为字符串被解析

（2）当将@变为=可以将name作为数据变量名进行查找，一个是字符串，一个是变量名

（3）& 绑定父级函数

怎样将数据和模版结合到一起，在自定义指令中若想进行dom操作将需要link。Angularjs中内置了简化的jquery，若想应用大部分功能，需要将jquery插件引入

xhliangailx163

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
angulaijs指令封装

一自定义指令angular.module下有方法controller run filter directive等，directive用来自定义指令其下面有很多方法，restrictreplacetemplatetemplateUrllinkcontroller1Restrict可以取4个值ACME 属性类注释元素2Tem
复制链接

扫一扫