关于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 生成指定范围数值随机数
Jan 09 Javascript
jquery.alert 弹出式复选框实现代码
Jun 15 Javascript
基于Jquery的动态添加控件并取值的实现代码
Sep 24 Javascript
js获取当前日期代码适用于网页头部
Jun 27 Javascript
jquery选择器大全 全面详解jquery选择器
Mar 06 Javascript
使用javascript实现Iframe自适应高度
Dec 24 Javascript
JavaScript实现动态删除列表框值的方法
Aug 12 Javascript
vue分类筛选filter方法简单实例
Mar 30 Javascript
简单实现JS上传图片预览功能
Apr 14 Javascript
vue--vuex详解
Apr 15 Javascript
浅谈VUE中演示v-for为什么要加key
Jan 16 Javascript
JavaScript缓动动画函数的封装方法
Nov 25 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面向对象全攻略 (十二) 抽象方法和抽象类
2009/09/30 PHP
php SQL Injection with MySQL
2011/02/27 PHP
openPNE常用方法分享
2011/11/29 PHP
使用php伪造referer的方法 利用referer防止图片盗链
2014/01/20 PHP
CI框架教程之优化验证码机制详解【验证码辅助函数】
2019/04/16 PHP
Laravel的Auth验证Token验证使用自定义Redis的例子
2019/09/30 PHP
javascript基础第一章 JavaScript与用户端
2010/07/22 Javascript
关于UTF-8的客户端用AJAX方式获取GB2312的服务器端乱码问题的解决办法
2010/11/30 Javascript
javascript代码运行不出来执行错误的可能情况整理
2013/10/18 Javascript
jQuery获取节点和子节点文本的方法
2014/07/22 Javascript
Javascript实现颜色rgb与16进制转换的方法
2015/04/18 Javascript
mvvm双向绑定机制的原理和实现代码(推荐)
2016/06/07 Javascript
JavaScript函数节流概念与用法实例详解
2016/06/20 Javascript
JavaScript中利用for循环遍历数组
2017/01/15 Javascript
element-ui 关于获取select 的label值方法
2018/08/24 Javascript
详解vue-cli3多环境打包配置
2019/03/28 Javascript
Vue 修改网站图标的方法
2020/12/31 Vue.js
闭包在python中的应用之translate和maketrans用法详解
2014/08/27 Python
Python中基本的日期时间处理的学习教程
2015/10/16 Python
Python设计模式中单例模式的实现及在Tornado中的应用
2016/03/02 Python
Python+Socket实现基于UDP协议的局域网广播功能示例
2017/08/31 Python
Python检测网络延迟的代码
2018/05/15 Python
Python画图实现同一结点多个柱状图的示例
2019/07/07 Python
tensorflow求导和梯度计算实例
2020/01/23 Python
CSS3实现渐变背景兼容问题
2020/05/06 HTML / CSS
英国综合网上购物商城:The Hut
2018/07/03 全球购物
27个经典Linux面试题及答案,你知道几个?
2014/03/11 面试题
入党推优材料
2014/06/02 职场文书
土建专业毕业生自荐书
2014/07/04 职场文书
2014年业务员工作总结范文
2014/11/17 职场文书
2015年入党积极分子评语
2015/03/26 职场文书
2015暑假实习报告范文
2015/07/13 职场文书
《包身工》教学反思
2016/02/23 职场文书
优秀党员先进事迹材料2016
2016/02/29 职场文书
golang为什么要统一错误处理
2022/04/03 Golang
前端使用svg图片改色实现示例
2022/07/23 HTML / CSS