如何用angularjs制作一个完整的表格之四__自定义ng-model标签的属性使其支持input之外的html元素
有的时候我们需要为非input类型的元素添加ng-model来实现双向的数据绑定，从而减少冗余代码，那么可以尝试一下的方式
例如：我页面中使用了contenteditable这个属性来实现用户可直接编译的div元素
html：
<style>
.text{
margin: 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:,pop:"北京"},{id:,pop:"上海"},{id:,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>
其中参数类别如下：
部分参数解释
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）?^组合
如何用angularjs制作一个完整的表格之四__自定义ng-model标签的属性使其支持input之外的html元素的更多相关文章
- 如何用angularjs制作一个完整的表格之一__创建简单表格
初步接手人生的第一个项目,需要用angularjs制作表格和实现各种功能,因此遇到了各种问题和以前不熟悉的知识点,在此记录下来,以供大家学习交流,解决方式可能并不完善或符合规范,如果大家有更好的方式欢 ...
- 如何用angularjs制作一个完整的表格之五__完整的案例
由于本人也是边学边写,因此整理的比较乱,下面放出我例子的完整代码,方便大家交流测试,如有问题欢迎评论 首先,表格采用的是BootStrap样式编辑的,主要使用的是angularjs,为了方便也有jQu ...
- 如何用angularjs制作一个完整的表格之三__在ng-repeat中使用ng-model
在ng-repeat中使用ng-model时会有许多问,有的人碰到无法获取绑定的数据内容,有的人遇到改动绑定的数据内容时所有循环生成的内容一起改变.上面的问题我在开发时也遇到过,但是解决后我却怎么也还 ...
- 如何用angularjs制作一个完整的表格之二__表格分页功能
接上一次,这次主要介绍表格分页功能,由于项目需要这个案例是关于前端分页的方式,现在很少会这么用了,但如有需要可以参考其中的思路 html: 1.通过UL来展示页标,其中每个页标的li是通过异步加载从获 ...
- php怎么做网站？如何用PHP开发一个完整的网站？
1.PHPer应具备的知识 (1)PHP知识: 熟练掌握基础函数,PHP语句(条件.循环),数组(排序.读取),函数(内部 构造),运算(数学 逻辑),面向对象(继承 接口 封装 多态静态属性)等. ...
- 如何用latex画一个简单的表格
latex毫无疑问是一个十分强大的论文写作工具,所以掌握它就显得非常有意义,讲一下如何画一个简单的表格,代码如下: \begin{table}\centering\begin{tabular}{||c ...
- 如何用css做一个细虚线边框表格
<style type="text/css"> <!-- .dashed_tbl { border-top: 1px dashed #333333; border ...
- 用JS制作一个信息管理平台完整版
前 言 JRedu 在之前的文章中,介绍了如何用JS制作一个实用的信息管理平台. 但是那样的平台功能过于简陋了,我们今天来继续完善一下. 首先我们回顾一下之前的内容. 1.JSON的基础知识 ...
- 使用CocosSharp制作一个游戏 - CocosSharp中文教程
注:本教程翻译自官方<Walkthrough - Building a game with CocosSharp>,官方教程有很多地方说的不够详细,或者代码不全,导致无法继续,本人在看了G ...
随机推荐
- FFT（快速傅里叶变换）：HDU 4609 3-idiots
3-idiots Time Limit: 10000/5000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total S ...
- osg
智能指针使用: osg::Geode* geode=new osg::Geode;//新建Geode指针 osg::ref_ptr<osg::Geode>geodePtr=geode;// ...
- 使用Sublime Text搭建python调试环境
原文地址:http://blog.csdn.net/wenxuansoft/article/details/38559731 pycharmt等IDE虽然用着爽,但毕竟在速度.资源上还是比较让人不爽的 ...
- UVA 11478 Halum（差分约束）
题目链接:http://acm.hust.edu.cn/vjudge/problem/viewProblem.action?id=34651 [思路] 差分约束系统. 设结点u上的操作和为sum[u] ...
- poj2287
田忌赛马的题目- - 贪心策略: 1,如果田忌的最快马快于齐王的最快马,则两者比. (因为若是田忌的别的马很可能就赢不了了,所以两者比) 2,如果田忌的最快马慢于齐王的最快马,则用田忌的最慢马和齐王的 ...
- Linux下多任务间通信和同步-概述
Linux下多任务间通信和同步-概述 嵌入式开发交流群280352802,欢迎加入! 在前面,我们学习了两种多任务的实现手段:进程和线程.由于进程是工作在独立的内存空间中,不同的进程间不能直接访问到对 ...
- mybatis 关联对象mapper.xml的写法
https://github.com/zfrHJ/mybaties/blob/master/mybaties/src/com/itheima/mybatits/mapper/OrdersMapperC ...
- JSP基本语法
在tomcat环境搭建一文中为大家详细的介绍了第一个JSP的程序--Hello World,大家都应该顺利的完成了吧,以此为一个开端,希望大家在学习java EE的路上乘风破浪,不断进步.今天,为大家 ...
- PyCharm4注册码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 name : newasp == ...
- 如何看懂Code128条形码
条形码就是我们看到的商品上有的那些竖条条. 要不是项目上用到这个或许我一辈子也不会对那个感兴趣. 条形码其实是分成很多类的,虽然他们看起来都差不多…… 常见的条形码的码制被称为39码.128码.417 ...