关于Angularjs中自定义指令一些有价值的细节和技巧小结


Posted in Javascript onApril 22, 2018

一:自定义指令常用模板

下面是大致的说明,不是全面的,后面来具体说明一些没有提及的细节和重要的相关知识:

angular.module('yelloxingApp', []).directive('uiDirective', function() {
  return {  
    restrict:String,//标明该指令可以在模板中用于元素E、属性A、类C和注释M或组合    
    priority:Number,//设置指令执行优先级,在某个DOM上优先级高的会先执行
        terminal:Boolean,    
    template:String or Template Function,//就是设置模板,和下面的templateUrl属性二个只可以设置一个,目的一样    
    templateUrl:String or Template Function,//除了字符串,这二个属性还可以设置函数    
    replace:Boolean,//指令模板是否替换原来的元素    
    scope:Boolean or Object,
    controller:String or function(scope, element, attrs) { ... },    
    require:String or Array,    
    //你需要知道link在每个实例都执行一遍,compile全程只会执行一遍
    link: function(scope, element, attrs,ctrl) { ... },    
    compile:function(element, attrs) {
      //常用的就是compile的此处写执行一次的代码,或者在link方法里面写和dom有关的操作
    }
  };
});

二:一些属性说明

【scope】

可以设置boolean或者对象,先来说说boolean,这个比较简单:

1.当设置true的时候,表示继承父scope,是一个子scope;

2.当设置false的时候,直接使用父scope。

还有一种对象设置方法,就是设置一种隔离的scope,在使用隔离scope的时候,提供了三种方法同隔离之外的地方交互,下面用一个例子来一一说明:

angular.module('yelloxingApp', []).directive("scopeExample", ['$rootScope', function($rootScope) {
  return {
    restrict: 'A',    
    scope: {
      _userDataName: "=userDataName",
      _onSend: "&onSend",
      _fromName: "@fromName"
    },    
    template: `
      <button ng-click="_useParentMethod()">
        点击按钮调用父级的方法
      </button>
      
      <input ng-model="_userDataName"/>
      <ul>
        <li>fromName={{newfromname}}</li>
        <li>这是从父级获取到的{{_userDataName}}</li>
      </ul>`,
       link: function($scope, element, attrs) {
      //使用@符号可将本地作用域的变量与DOM属性的值进行绑定,即这里通过@得到父类fromName的值
      $scope.newfromname = $scope._fromName;
      $scope._useParentMethod = function() {      
        //使用&符号可以在其中调用父类的方法
        $scope._onSend({ "email": { "email": "yelloxing@gmail.com" } });
        console.log($scope._userDataName);        
      };
    }
  };
}]);

上面是指令的写法,下面来看看控制器里面有什么:

$scope.name = "心叶";
$scope.user = "yelloxing";
$scope.sendMail = function(email){
  console.error(email);
}

最后别忘了html里面的使用:

<div scope-example user-data-name="user" on-send='sendMail(email)' from-name={{name}}></div>

【require】

请求另外的controller,然后作为link方法的第四个参数传递进去,我们需要注意的是查找控制器的方法。

查找控制器的方法可以这样理解:使用?表示如果在当前指令中没有找到所需要的控制器,会将null作为传给link函数的第四个参数,如果添加了^前缀,指令会在上游的指令链中查找require参数所指定的控制器,他们也可以组合,比如require: "?^ngModel",如果没有前缀,指令将会在自身所提供的控制器中进行查找,如果没有找到任何控制器(或具有指定名字的指令)就抛出一个错误。

【terminal】

属性terminal:为true时,指示优先级小于当前指令的指令都不执行,仅执行到本指令。

三:视图和model之间的数据格式化

类似过滤器的功能,有时候我们希望页面显示的是数据经过某种翻译后的样子,以便于约定,不过对于数据库也许简单的序号会更有益,因此你可能会需要在link中使用下面的方法来实现这个功能:

1.ctrl.$formatters.unshift(function(input) {//model到view的数据格式化});

2.ctrl.$parsers.unshift(function(input) {//view到model的数据格式化})。

上面的$formatters和$parsers就是二个队列,视图到model和model到视图,会方便经过里面定义的方法的过滤,有点类似管道流,最后流到目的地。

别忘了设置类似require: "?ngModel"这样的语句去查找控制器。

四:视图和model数据同步问题

有时候在指令里面通过jquery修改了input的数据,不过angularjs并不会知道,这时候,你可以选择下面中的一个方法:

1.触发输入框change改变,让Angularjs发现数据改变了,从而去调用$setViewValue(value),同步数据:$("input").trigger("change");

2.直接手动触发同步value到viewValue和modelValue中的行为:ctrl.$setViewValue($scope.info)。

五:几个零碎的技巧
1.根据输入框是否合法来设置true或false:ctrl.$setValidity(errorType, boolean);//errorType表示错误类别,可以自定义

2.设置监听指定的一个model值,当然还有监听集合等方法:$scope.$watch(attrs['ngModel'], function(newValue, oldValue) {});

3.有时候在指令里面新添加的字符串需要被angularjs管理,就可以用下面的方法编译一下:$compile(newHtml)($scope)。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
深入理解JavaScript系列(7) S.O.L.I.D五大原则之开闭原则OCP
Jan 15 Javascript
jQuery Tools Dateinput使用介绍
Jul 14 Javascript
jquery中文乱码的多种解决方法
Jun 21 Javascript
特殊日期提示功能的实现方法
Jun 16 Javascript
jQuery获取radio选中项的值实例
Jun 18 Javascript
AngularJS ng-blur 指令详解及简单实例
Jul 30 Javascript
JavaScript仿支付宝6位数字密码输入框
Dec 29 Javascript
JavaScript通过改变文字透明度实现的文字闪烁效果实例
Apr 27 Javascript
使用 Javascript 实现浏览器推送提醒功能的示例
Nov 03 Javascript
微信小程序实现蒙版弹出窗功能
Sep 17 Javascript
vue基础知识--axios合并请求和slot
Jun 04 Javascript
vue+element ui实现锚点定位
Jun 29 Vue.js
jQuery中图片展示插件highslide.js的简单dom
Apr 22 #jQuery
手写简单的jQuery雪花飘落效果实例
Apr 22 #jQuery
JQuery元素快速查找与操作
Apr 22 #jQuery
javaScript产生随机数的用法小结
Apr 21 #Javascript
JS弹窗 JS弹出DIV并使整个页面背景变暗功能的实现代码
Apr 21 #Javascript
JavaScript调用模式与this关键字绑定的关系
Apr 21 #Javascript
关于jquery layui弹出层的使用方法
Apr 21 #jQuery
You might like
php的数组与字符串的转换函数整理汇总
2013/07/18 PHP
PHP实现获取域名的方法小结
2014/11/05 PHP
基于命令行执行带参数的php脚本并取得参数的方法
2016/01/25 PHP
原生php实现excel文件读写的方法分析
2018/04/25 PHP
js 判断浏览器使用的语言示例代码
2014/03/22 Javascript
jquery map方法使用示例
2014/04/23 Javascript
浅谈Javascript中匀速运动的停止条件
2014/12/19 Javascript
初识Javascript小结
2015/07/16 Javascript
基于d3.js实现实时刷新的折线图
2016/08/03 Javascript
js实现打地鼠小游戏
2017/02/13 Javascript
vue学习笔记之指令v-text &amp;&amp; v-html &amp;&amp; v-bind详解
2017/05/12 Javascript
Vue2.0用 watch 观察 prop 变化(不触发)
2017/09/08 Javascript
详解使用webpack构建多页面应用
2017/12/21 Javascript
JS使用setInterval实现的简单计时器功能示例
2018/04/19 Javascript
vue-cli 打包使用history模式的后端配置实例
2018/09/20 Javascript
微信小程序基于ColorUI构建皮皮虾短视频去水印组件
2020/11/04 Javascript
[02:21]DOTA2英雄基础教程 蝙蝠骑士
2013/12/16 DOTA
[00:32]DOTA2上海特级锦标赛 COL战队宣传片
2016/03/04 DOTA
python django 增删改查操作 数据库Mysql
2017/07/27 Python
Flask框架web开发之零基础入门
2018/12/10 Python
解决Pycharm调用Turtle时 窗口一闪而过的问题
2019/02/16 Python
使用python将excel数据导入数据库过程详解
2019/08/27 Python
Python测试Kafka集群(pykafka)实例
2019/12/23 Python
python opencv 实现对图像边缘扩充
2020/01/19 Python
基于Python中random.sample()的替代方案
2020/05/23 Python
python如何写个俄罗斯方块
2020/11/06 Python
Pure Collection美国官网:来自英国羊绒专家的奢华羊绒
2017/11/19 全球购物
英国第一家领先的在线处方眼镜零售商:Glasses Direct
2018/02/23 全球购物
请说出这段代码执行后a和b的值分别是多少
2015/03/28 面试题
与C++相比,Java中的数组有什么不同
2014/03/25 面试题
工程部主管岗位职责
2013/11/17 职场文书
美丽人生观后感
2015/06/03 职场文书
文艺有韵味的诗句(生命类、亲情类...)
2019/07/11 职场文书
Python Django 后台管理之后台模型属性详解
2021/04/25 Python
详解PHP用mb_string处理windows中文字符
2021/05/26 PHP
css filter和getUserMedia的联合使用
2022/02/24 HTML / CSS