关于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 相关文章推荐
情人节之礼 js项链效果
Feb 13 Javascript
JS测试显示屏分辨率以及屏幕尺寸的方法
Nov 22 Javascript
JavaScript禁止页面操作的示例代码
Dec 17 Javascript
JS中怎样判断undefined(比较不错的方法)
Mar 27 Javascript
JS验证IP,子网掩码,网关和MAC的方法
Jul 02 Javascript
单击按钮发送验证码,出现倒计时的简单实例
Mar 17 Javascript
Bootstrap 3浏览器兼容性问题及解决方案
Apr 11 Javascript
JavaScript编程设计模式之观察者模式(Observer Pattern)实例详解
Oct 25 Javascript
Vue表单类的父子组件数据传递示例
May 03 Javascript
vue组件(全局,局部,动态加载组件)
Sep 02 Javascript
jQuery实现带3D切割效果的轮播图功能示例【附源码下载】
Apr 04 jQuery
vue 数字翻牌器动态加载数据
Apr 20 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
使用array mutisort 实现按某字段对数据排序
2013/06/18 PHP
解析link_mysql的php版
2013/06/30 PHP
php的webservice的wsdl的XML无法显示问题的解决方法
2014/03/11 PHP
ThinkPHP实例化模型的四种方法概述
2014/08/22 PHP
PHP 使用redis简单示例分享
2015/03/05 PHP
PHP结合jQuery.autocomplete插件实现输入自动完成提示的功能
2015/04/27 PHP
thinkphp配置文件路径的实现方法
2016/08/30 PHP
url地址自动加#号问题说明
2010/08/21 Javascript
js 替换功能函数,用正则表达式解决,js的全部替换
2010/12/08 Javascript
JS代码优化技巧之通俗版(减少js体积)
2011/12/23 Javascript
用js实现小球的自由移动代码
2013/04/22 Javascript
jQuery ajax dataType值为text json探索分享
2013/09/23 Javascript
jquery 页面滚动到底部自动加载插件集合
2014/01/31 Javascript
jQuery 隐藏和显示 input 默认值示例
2014/06/03 Javascript
详解javascript中的事件处理
2015/11/06 Javascript
JS中改变this指向的方法(call和apply、bind)
2016/03/26 Javascript
JavaScript 完成注册页面表单校验的实例
2017/08/19 Javascript
使用jquery+iframe做一个ajax上传效果(实例)
2017/08/24 jQuery
NodeJS收发GET和POST请求的示例代码
2017/08/25 NodeJs
微信小程序实现授权登录
2019/05/15 Javascript
layui实现给某一列加点击事件
2019/10/26 Javascript
VUE兄弟组件传值操作实例分析
2019/10/26 Javascript
python连接MySQL、MongoDB、Redis、memcache等数据库的方法
2013/11/15 Python
在主机商的共享服务器上部署Django站点的方法
2015/07/22 Python
padas 生成excel 增加sheet表的实例
2018/12/11 Python
在python里创建一个任务(Task)实例
2020/04/25 Python
CSS3 实现的火焰动画
2020/12/07 HTML / CSS
美国运动鞋类和服装零售连锁店:Shoe Palace
2019/08/13 全球购物
计算机专业毕业生自荐信
2013/12/31 职场文书
《云房子》教学反思
2014/04/20 职场文书
大学学生会竞选演讲稿
2014/04/25 职场文书
党的群众路线教育实践活动心得体会(企业)
2014/11/03 职场文书
生产车间主任岗位职责
2015/04/08 职场文书
如何把新闻人物写得立体、鲜活?
2019/08/14 职场文书
《鲁滨逊漂流记》之六读后感(4篇)
2019/09/29 职场文书
简单聊聊Vue中的计算属性和属性侦听
2021/10/05 Vue.js