玩转angularJs——通过自定义ng-model,不仅仅只是input可以实现双向数据绑定

Created at 2017-05-22 Category programming Tag AngularJs times read

AngularJs双向绑定特性在开发中很方便很实用,但是由于ng-model一般只能挂在input,textarea上,因此我们需要自定义ng-model来在div等元素上使用该标签。

自定义指令:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
.directive('contenteditable', ['$window', function() {
return {
restrict: 'A',
require: '?ngModel',
link: function(scope, element, attrs, ngModel) {
if (!ngModel) {
return;
}
ngModel.$render = function() {
element.html(ngModel.$viewValue || '');
};
element.on('blur keyup change', function() {
scope.$apply(readViewText);
});
function readViewText() {
var html = element.html();
if (attrs.stripBr && html === '<br>') {
html = '';
}
ngModel.$setViewValue(html);
}
}
}
}])

html页面中div可以这样使用ng-model:

1
<div class="icon-arrow-title title-color-2" contenteditable="true" ng-model="param.MobileNum" style="right: 15px;"></div>

这样,当前div为可编辑状态,双向数据绑定就可以了。

Table of Content

© 冷泉 Since 2017 - 2018

Total times visits. visitors.

Kwin's Blog | 个人网站