如何用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 ...
随机推荐
- （转载）Linux定时任务cron配置
(转载)http://blog.csdn.net/jbgtwang/article/details/7995801 实现linux定时任务有:cron.anacron.at等,这里主要介绍cron服务 ...
- vim下缩进及高亮设置
1.配置文件的位置 在目录 /etc/ 下面,有个名为vimrc的文件,这是系统中公共的vim配置文件,对所有用户都有效.而在每个用户的主目录下,都可以自己建立私有的配置文件,命名为:“.vimrc” ...
- 使用国内镜像通过pip安装python的一些包 Cannot fetch index base URL http://pypi.python.org/simple/
原文地址:http://www.xuebuyuan.com/1157602.html 学习flask,安装virtualenv环境,这些带都ok,但是一安装包总是出错无法安装, 比如这样超时的问题: ...
- CodeForces 220(div 2)
悲剧的div2..... A 题意:在n * m的矩形平面直角坐标系中,从(x, y)可以到四个点(x - a, y - b),(x + a, y - b),(x - a, y + b),(x + a ...
- SRM 395(1-250pt)
DIV1 250pt 题意:在平面直角坐标系中,只能走到整点,每次有两种移动方法,可以沿平行于坐标轴方向走,也可以沿45度方向走,前者走一步耗时wt,后者走一步耗时st.比如从(x, y)可以走到(x ...
- [转载]Python兵器谱
转载自:http://www.52nlp.cn/python-网页爬虫-文本处理-科学计算-机器学习-数据挖掘 曾经因为NLTK的缘故开始学习Python,之后渐渐成为我工作中的第一辅助脚本语言,虽然 ...
- Linux 环境变量 $PATH
我们知道查阅文件属性的指令 ls 完整文件名为:/bin/ls(这是绝对路径),那为什么可以在任何地方执行/bin/ls 这个指令呢? 为什么在任何目录下输入 ls 就一定可以显示出一些讯息而不会说 ...
- Axure7.0.0.3155注册码
Licence:aaa Key1:h624pifAqt7It5e8boKkML+Y4RjDX5xknP4k7QktJYQoxsvv7VUS7hBCv/2ef45P Key2:2GQrt5XHYY7SB ...
- VB.NET版机房收费系统—DataGridView应用
事实上,先前刚刚開始敲机房的时候,刚用到DataGridView的时候,总显得力不从心,先要一下子就学会,看了非常多的资料,但是依照写的时候,自己有不知道从什么地方下手,于是,当自己用查询SQL语句, ...
- CDH5 安装过程
一.环境 1.1 操作系统 $ cat /etc/redhat-release CentOS release 6.5 (Final) 1.2 Java环境 $ java -version java v ...