angularjs自定义ng-model标签的属性


Posted in Javascript onJanuary 21, 2016

有的时候我们需要为非input类型的元素添加ng-model来实现双向的数据绑定,从而减少冗余代码,那么可以尝试一下的方式

例如:我页面中使用了contenteditable这个属性来实现用户可直接编译的div元素

html:

<style>
    .text{
      margin:0 auto;
      width:100px;
      height:50px;
      border:1px solid red;
    }
  </style>
</head>
<body>
<div ng-controller="selectController">
  <div ng-repeat="pop in citylist">
    <div class="text" contenteditable="true" ng-model="pop.pop"></div>
  </div>
  <button ng-click="cs()">输出新数据</button>
</div>
</body>

但是直接绑定ng-model是肯定得不到数据的,这时就需要为其增加自定义的属性,如下所示。

js:

<script>
  var app = angular.module('app', []);
  app.controller('selectController', function ($scope) {
    $scope.citylist=[{id:1,pop:"北京"},{id:1,pop:"上海"},{id:1,pop:"广州"}];
    $scope.p={};
    $scope.cs=function(){
      console.log($scope.citylist);
    }
  }).directive('contenteditable', function() {//自定义ngModel的属性可以用在div等其他元素中
    return {
      restrict: 'A', // 作为属性使用
      require: '?ngModel', // 此指令所代替的函数
      link: function(scope, element, attrs, ngModel) {
        if (!ngModel) {
          return;
        } // do nothing if no ng-model
        // Specify how UI should be updated
        ngModel.$render = function() {
          element.html(ngModel.$viewValue || '');
        };
        // Listen for change events to enable binding
        element.on('blur keyup change', function() {
          scope.$apply(readViewText);
        });
        // No need to initialize, AngularJS will initialize the text based on ng-model attribute
        // Write data to the model
        function readViewText() {
          var html = element.html();
          // When we clear the content editable the browser leaves a <br> behind
          // If strip-br attribute is provided then we strip this out
          if (attrs.stripBr && html === '<br>') {
            html = '';
          }
          ngModel.$setViewValue(html);
        }
      }
    };
  })
</script>

其中参数类别如下:

angularjs自定义ng-model标签的属性

部分参数解释

restrict:

(字符串)可选参数,指明指令在DOM里面以什么形式被声明;

取值有:E(元素),A(属性),C(类),M(注释),其中默认值为A;

E(元素):<directiveName></directiveName>
A(属性):<div directiveName='expression'></div>
C(类):   <div class='directiveName'></div>
M(注释):<--directive:directiveName expression-->

2.require

字符串代表另一个指令的名字,它将会作为link函数的第四个参数

具体用法我们可以举个例子说明

假设现在我们要编写两个指令,两个指令中的link链接函数中(link函数后面会讲)存在有很多重合的方法,

这时候我们就可以将这些重复的方法写在第三个指令的controller中(上面也讲到controller经常用来提供指令间的复用行为)

然后在这两个指令中,require这个拥有controller字段的的指令(第三个指令),

最后通过link链接函数的第四个参数就可以引用这些重合的方法了。

<!doctype html>
<html ng-app="myApp">
<head>
 <script src="http://cdn.staticfile.org/angular.js/1.2.10/angular.min.js"></script>
</head>
<body>
 <outer-directive>
   <inner-directive></inner-directive>
   <inner-directive2></inner-directive2>
 </outer-directive>
 <script>
  var app = angular.module('myApp', []);
  app.directive('outerDirective', function() {
     return {
        scope: {},
        restrict: 'AE',
        controller: function($scope) {   
         this.say = function(someDirective) { 
           console.log('Got:' + someDirective.message);
         };
        }
      };
  });
  app.directive('innerDirective', function() {
     return {
        scope: {},
        restrict: 'AE',
        require: '^outerDirective',
        link: function(scope, elem, attrs, controllerInstance) {
            scope.message = "Hi,leifeng";
            controllerInstance.say(scope);
        }
     };
  });
  app.directive('innerDirective2', function() {
     return {
        scope: {},
        restrict: 'AE',
        require: '^outerDirective',
        link: function(scope, elem, attrs, controllerInstance) {
            scope.message = "Hi,shushu";
            controllerInstance.say(scope);
        }
     };
  });
 </script>
</body>
</html>

上面例子中的指令innerDirective和指令innerDirective2复用了定义在指令outerDirective的controller中的方法

也进一步说明了,指令中的controller是用来让不同指令间通信用的。

另外我们可以在require的参数值加上下面的某个前缀,这会改变查找控制器的行为:

(1)没有前缀,指令会在自身提供的控制器中进行查找,如果找不到任何控制器,则会抛出一个error

(2)?如果在当前的指令没有找到所需的控制器,则会将null传给link连接函数的第四个参数

(3)^如果在当前的指令没有找到所需的控制器,则会查找父元素的控制器

(4)?^组合

Javascript 相关文章推荐
firefox中用javascript实现鼠标位置的定位
Jun 17 Javascript
含有CKEditor的表单如何提交
Jan 09 Javascript
jQuery常用操作方法及常用函数总结
Jun 19 Javascript
javascript数据结构之双链表插入排序实例详解
Nov 25 Javascript
js的form表单提交url传参数(包含+等特殊字符)的两种解决方法
May 25 Javascript
jQuery日期范围选择器附源码下载
May 23 jQuery
详解小程序设置缓存并且不覆盖原有数据
Apr 15 Javascript
详解50行代码,Node爬虫练手项目
Apr 22 Javascript
Vue.js组件props数据验证实现详解
Oct 19 Javascript
vue 单页应用和多页应用的优劣
Oct 22 Javascript
利用PHP实现递归删除链表元素的方法示例
Oct 23 Javascript
原生js实现放大镜组件
Jan 22 Javascript
angularjs在ng-repeat中使用ng-model遇到的问题
Jan 21 #Javascript
js实现的二分查找算法实例
Jan 21 #Javascript
jQuery模拟物体自由落体运动(附演示与demo源码下载)
Jan 21 #Javascript
angularjs表格分页功能详解
Jan 21 #Javascript
使用angularjs创建简单表格
Jan 21 #Javascript
Jquery中巧用Ajax的beforeSend方法
Jan 20 #Javascript
Javascript中神奇的this
Jan 20 #Javascript
You might like
PHP中redis的用法深入解析
2014/02/20 PHP
PHP实现的简单三角形、矩形周长面积计算器分享
2014/11/18 PHP
JavaScript RegExp方法获取地址栏参数(面向对象)
2009/03/10 Javascript
EASYUI TREEGRID异步加载数据实现方法
2012/08/22 Javascript
使用js写的一个简易的投票
2013/11/27 Javascript
JQuery处理json与ajax返回JSON实例代码
2014/01/03 Javascript
form表单action提交的js部分与html部分
2014/01/07 Javascript
js函数模拟显示桌面.scf程序示例
2014/04/20 Javascript
常用的JavaScript模板引擎介绍
2015/02/28 Javascript
在WordPress中加入Google搜索功能的简单步骤讲解
2016/01/04 Javascript
Vue数据驱动模拟实现3
2017/01/11 Javascript
vue2.0实现分页组件的实例代码
2017/06/22 Javascript
JavaScript中运算符规则和隐式类型转换示例详解
2017/09/06 Javascript
Nodejs调用Dll模块的方法
2018/09/17 NodeJs
JS实现的全选、全不选及反选功能【案例】
2019/02/19 Javascript
vue将后台数据时间戳转换成日期格式
2019/07/31 Javascript
浅谈Vue.use到底是什么鬼
2020/01/21 Javascript
vue中使用带隐藏文本信息的图片、图片水印的方法
2020/04/24 Javascript
微信小程序实现点击页面出现文字
2020/09/21 Javascript
[06:36]吞吞映像top1
2014/06/20 DOTA
Python开发如何在ubuntu 15.10 上配置vim
2016/01/25 Python
解决Python plt.savefig 保存图片时一片空白的问题
2019/01/10 Python
pycharm 将python文件打包为exe格式的方法
2019/01/16 Python
如何在sublime编辑器中安装python
2020/05/20 Python
Python3.9.0 a1安装pygame出错解决全过程(小结)
2021/02/02 Python
Python .py生成.pyd文件并打包.exe 的注意事项说明
2021/03/04 Python
The Outnet亚太地区:折扣设计师时装店
2019/12/05 全球购物
电大毕业生自我鉴定
2013/11/10 职场文书
党的群众路线教育实践活动学习笔记
2014/11/05 职场文书
2014年教研室工作总结
2014/12/06 职场文书
廉政承诺书
2015/01/19 职场文书
2015婚礼主持词开场白
2015/05/28 职场文书
电影雷锋观后感
2015/06/10 职场文书
公司老总年会致辞
2015/07/30 职场文书
2016年法制宣传月活动总结
2016/04/01 职场文书
详解MySQL事务的隔离级别与MVCC
2021/04/22 MySQL