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 相关文章推荐
禁止js文件缓存的代码
Apr 09 Javascript
JavaScript执行效率与性能提升方案
Dec 21 Javascript
JS清空多文本框、文本域示例代码
Feb 24 Javascript
ECMAScript中函数function类型
Jun 03 Javascript
手机端实现Bootstrap简单图片轮播效果
Oct 13 Javascript
Angular 4依赖注入学习教程之InjectToken的使用(八)
Jun 04 Javascript
利用vscode调试编译后的js代码详解
May 14 Javascript
手动下载Chrome并解决puppeteer无法使用问题
Nov 12 Javascript
35个最好用的Vue开源库(史上最全)
Jan 03 Javascript
layui表格 列自动适应大小失效的解决方法
Sep 06 Javascript
浅谈webpack和webpack-cli模块源码分析
Jan 19 Javascript
有关vue 开发钉钉 H5 微应用 dd.ready() 不执行问题及快速解决方案
May 09 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缓存技术介绍
2006/11/25 PHP
PHP 自定义错误处理函数的使用详解
2013/05/10 PHP
PHP批量修改文件名称的方法分析
2017/02/27 PHP
PHP底层运行机制与工作原理详解
2020/07/31 PHP
Auntion-TableSort国人写的一个javascript表格排序的东西
2007/11/12 Javascript
jquery中的事件处理详细介绍
2013/06/24 Javascript
JS和JQ的event对象区别分析
2014/11/24 Javascript
JavaScript表格常用操作方法汇总
2015/04/15 Javascript
7个jQuery最佳实践
2016/01/12 Javascript
JS 组件系列之BootstrapTable的treegrid功能
2017/06/16 Javascript
Vue.js实现输入框绑定的实例代码
2017/08/24 Javascript
Express使用html模板的详细代码
2017/09/18 Javascript
jQuery 图片查看器插件 Viewer.js用法简单示例
2020/04/04 jQuery
js实现小球在页面规定的区域运动
2020/06/16 Javascript
Python交换变量
2008/09/06 Python
python生成指定长度的随机数密码
2014/01/23 Python
python下载微信公众号相关文章
2019/02/26 Python
Python中使用双下划线防止类属性被覆盖问题
2019/06/27 Python
Form表单及django的form表单的补充
2019/07/25 Python
python 数据生成excel导出(xlwt,wlsxwrite)代码实例
2019/08/23 Python
Python实现投影法分割图像示例(二)
2020/01/17 Python
python中的split、rsplit、splitlines用法说明
2020/10/23 Python
Python爬虫逆向分析某云音乐加密参数的实例分析
2020/12/04 Python
canvas像素点操作之视频绿幕抠图
2018/09/11 HTML / CSS
乌克兰时尚鞋子和衣服购物网站:Born2be
2018/05/24 全球购物
施华洛世奇加拿大官网:SWAROVSKI加拿大
2018/06/03 全球购物
Richards网上商店:当代时尚,遍布巴西
2019/11/03 全球购物
衰败城市英国官网:Urban Decay英国
2020/04/29 全球购物
本科生个人求职自荐信
2013/09/26 职场文书
成品仓管员工作职责
2013/12/29 职场文书
家长会学生家长演讲稿
2013/12/29 职场文书
《小鹰学飞》教学反思
2014/04/23 职场文书
Python破解极验滑动验证码详细步骤
2021/05/21 Python
Vue提供的三种调试方式你知道吗
2022/01/18 Vue.js
动视暴雪取消疫苗禁令 让所有员工返回线下工作
2022/04/03 其他游戏
Pandas 数据编码的十种方法
2022/04/20 Python