关于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 相关文章推荐
使用jquery组件qrcode生成二维码及应用指南
Feb 22 Javascript
js实现点击图片改变页面背景图的方法
Feb 28 Javascript
基于JavaScript如何制作遮罩层对话框
Jan 26 Javascript
JavaScript操作select元素和option的实例代码
Jan 29 Javascript
Javascript 两种刷新方法以及区别和适用范围
Jan 17 Javascript
使用bootstrap插件实现模态框效果
May 10 Javascript
详解Puppeteer 入门教程
May 09 Javascript
深入理解移动前端开发之viewport
Oct 19 Javascript
vue-cli 3 全局过滤器的实例代码详解
Jun 03 Javascript
Javascript Dom元素获取和添加详解
Sep 24 Javascript
npx create-react-app xxx创建项目报错的解决办法
Feb 17 Javascript
vue实现在进行增删改操作后刷新页面
Aug 05 Javascript
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
笑谈配置,使用Smarty技术
2007/01/04 PHP
在任意字符集下正常显示网页的方法一
2007/04/01 PHP
解析PHP将对象转换成数组的方法(兼容多维数组类型)
2013/06/21 PHP
thinkphp特殊标签用法概述
2014/11/24 PHP
Yii2使用swiftmailer发送邮件的方法
2016/05/03 PHP
thinkphp5.1 框架钩子和行为用法实例分析
2020/05/25 PHP
一个加载js文件的小脚本
2007/06/28 Javascript
javascript while语句和do while语句的区别分析
2007/12/08 Javascript
前端开发必须知道的JS之原型和继承
2010/07/06 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(五)可移动地图的实现
2013/01/23 Javascript
javascript获取元素离文档各边距离的方法
2015/02/13 Javascript
js简单网速测试方法完整实例
2015/12/15 Javascript
基于jQuery.validate及Bootstrap的tooltip开发气泡样式的表单校验组件思路详解
2016/07/18 Javascript
利用node.js如何搭建一个简易的即时响应服务器
2017/05/28 Javascript
JSON在Javascript中的使用(eval和JSON.parse的区别)详细解析
2017/09/05 Javascript
基于Vue渲染与插件的加载顺序的问题详解
2018/03/05 Javascript
详解vue开发中调用微信jssdk的问题
2019/04/16 Javascript
Echarts动态加载多条折线图的实现代码
2019/05/24 Javascript
JS中间件设计模式的深入探讨与实例分析
2020/04/11 Javascript
javascript如何使用函数random来实现课堂随机点名方法详解
2020/07/28 Javascript
浅谈Python 中整型对象的存储问题
2016/05/16 Python
python3使用requests模块爬取页面内容的实战演练
2017/09/25 Python
python算法题 链表反转详解
2019/07/02 Python
Python assert关键字原理及实例解析
2019/12/13 Python
Django 解决由save方法引发的错误
2020/05/21 Python
python 基于DDT实现数据驱动测试
2021/02/18 Python
使用html2canvas将页面转成图并使用用canvas2image下载
2019/04/04 HTML / CSS
优秀的教师个人的中文求职信
2013/09/21 职场文书
工程现场管理求职自荐信
2013/10/02 职场文书
美容院店长岗位职责
2014/04/08 职场文书
服装设计专业毕业生求职信
2014/04/09 职场文书
新教师岗前培训方案
2014/06/05 职场文书
员工年终自我评价
2014/09/14 职场文书
乡镇组织委员个人整改措施
2014/09/16 职场文书
用人单位聘用意向书
2015/05/11 职场文书
导游词之贵州百里杜鹃
2019/10/29 职场文书