如何用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 ...
随机推荐
- （转载）PHP怎么获取MySQL执行sql语句的查询时间
(转载自CSDN) 方法一: //计时开始 runtime(); //执行查询 mysql_query($sql); //计时结束. echo runtime(1); //计时函数 function ...
- excel时会弹出向程序发送命令时出现问题的提示框
出现此问题需要做两个操作来解决: 1.在开始所有程序中找到Microsoft Excel 2007的运行程序,右键选择属性,在兼容性标签将“以管理员身份运行此程序”的勾去掉. 2.在打开的Excel程 ...
- 动态规划——J 括号配对问题
J - 括号匹配 Time Limit:1000MS Memory Limit:65536KB 64bit IO Format:%I64d & %I64u Submit Sta ...
- 对Spring的一些理解
最近在复习一些关于框架的概念性问题,主要是为了最近的面试,怕被问到这些概念性的问题.不过在真正做开发的时候还是要好好理解这些框架的基本原理,以及它们的工作流程.这样,我们才能更好的使用这些框架.下面就 ...
- XCODE 代码行统计
find . -name "*.m" -or -name "*.h" -or -name "*.c" |xargs grep -v &quo ...
- java.lang.NoClassDefFoundError: com/ibatis/sqlmap/engine/mapping/result/BasicResultMap
错误日志: java.lang.NoClassDefFoundError: com/ibatis/sqlmap/engine/mapping/result/BasicResultMap at ...
- 美丽的表格样式(使用CSS样式表控制表格样式)
按照WEB2.0风格,设计了几个表格样式,希望大家喜欢. WEB2.0提倡使用div开布局,但不是要全然放弃使用表格,表格在数据展现方面还是不错的选择. 如今使用介绍使用CSS样式表来控制.美化表格的 ...
- STL源码剖析—stl_config
操作系统:centos 6.4STL源码版本:3.3 前言: 要看一个项目的源码,首先要选中切入点. 那么在sgi stl 标准库中,其切入点是什么呢? 答案是:stl_config ...
- Android中的Surface和SurfaceView
一.什么是Surface 简单的说Surface对应了一块屏幕缓冲区,每个window对应一个Surface,任何View都要画在Surface的Canvas上(后面有原因解释).传统的view共享一 ...
- codevs 2495 水叮当的舞步IDA*
/* 比较简单的A* 估价函数很简单就是除了左上角的联通快之外的不同的个数 加上迭代 好像答案最多在16步之内出解 这样裸裸的交上去是50分 在考虑剪枝 每个选颜色的时候一定是选左上角联通快附近的颜色 ...