关于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 相关文章推荐
从Ajax到JQuery Ajax学习
Feb 14 Javascript
利用jQuery接受和处理xml数据的代码(.net)
Mar 28 Javascript
js去空格技巧分别去字符串前后、左右空格
Oct 21 Javascript
使用JQuery快速实现Tab的AJAX动态载入(实例讲解)
Dec 11 Javascript
异步安全加载javascript文件的方法
Jul 21 Javascript
jquery实现带缩略图的可定制高度画廊效果(5种)
Aug 28 Javascript
connection reset by peer问题总结及解决方案
Oct 21 Javascript
JS实用的带停顿的逐行文本循环滚动效果实例
Nov 23 Javascript
canvas的神奇用法
Feb 03 Javascript
在 Angular中 使用 Lodash 的方法
Feb 11 Javascript
JavaScript基础之静态方法和实例方法分析
Dec 26 Javascript
微信小程序云开发获取文件夹下所有文件(推荐)
Nov 14 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
php模板之Phpbean的目录结构
2008/01/10 PHP
PHP加Nginx实现动态裁剪图片方案
2014/03/10 PHP
Thinkphp中volist标签mod控制一定记录的换行BUG解决方法
2014/11/04 PHP
Centos 6.5下PHP 5.3安装ffmpeg扩展的步骤详解
2017/03/02 PHP
php实现文件上传基本验证
2020/03/04 PHP
jQuery弹出层插件简化版代码下载
2008/10/16 Javascript
js 刷新页面的代码小结 推荐
2010/04/02 Javascript
IE下Ajax缓存问题的快速解决方法(get方式)
2014/01/09 Javascript
jQuery设置与获取HTML,文本和值的简单实例
2014/02/26 Javascript
详解JavaScript中的异常处理方法
2015/06/16 Javascript
非常实用的12个jquery代码片段
2015/11/02 Javascript
javascript弹出窗口实现代码
2015/11/12 Javascript
Bootstrap select下拉联动(jQuery cxselect)
2017/01/04 Javascript
手把手教你搭建ES6的开发运行环境
2017/07/11 Javascript
JS非空验证及邮箱验证的实例
2017/08/11 Javascript
利用jquery和BootStrap实现动态滚动条效果
2018/12/03 jQuery
微信小程序基于高德地图查找位置并显示文字
2019/10/30 Javascript
[01:20]DOTA2 2017国际邀请赛冠军之路无止竞
2017/06/19 DOTA
Python有序字典简单实现方法示例
2017/09/28 Python
Python3多线程爬虫实例讲解代码
2018/01/05 Python
在Python 不同级目录之间模块的调用方法
2019/01/19 Python
PyCharm2020.3.2安装超详细教程
2021/02/08 Python
多重CSS背景动画实现方法示例
2014/04/04 HTML / CSS
介绍Ibatis的核心类
2013/11/18 面试题
公司建议书怎么写
2014/05/15 职场文书
一份恶作剧的检讨书
2014/09/13 职场文书
党的群众路线教育实践活动党员个人剖析材料
2014/10/08 职场文书
2014年最新版离婚协议书范本
2014/11/25 职场文书
市场总监岗位职责
2015/02/11 职场文书
社区志愿服务活动感想
2015/08/07 职场文书
2015年小学师德师风建设工作总结
2015/10/23 职场文书
准备去美国留学,那么大学申请文书应该怎么写?
2019/08/12 职场文书
七年级写作指导之游记作文
2019/10/07 职场文书
2019年大学生暑期社会实践调查报告模板
2019/11/07 职场文书
详解Flutter网络请求Dio库的使用及封装
2022/04/14 Java/Android
Spring Boot 使用 Spring-Retry 进行重试框架
2022/04/24 Java/Android