码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2017-05-22 20:03:54      阅读:791      评论:0      收藏:0      [点我收藏+]

标签:events   function   ict   lis   自定义   通过   value   link   cti   

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

自定义指令:

 1 //自定义ngModel的属性
 2     .directive(‘contenteditable‘, [‘$window‘, function() {
 3         return {
 4             restrict: ‘A‘,
 5             require: ‘?ngModel‘, // 此指令所代替的函数
 6             link: function(scope, element, attrs, ngModel) {
 7                 if (!ngModel) {
 8                     return;
 9                 } // do nothing if no ng-model
10                 // Specify how UI should be updated
11                 ngModel.$render = function() {
12                     element.html(ngModel.$viewValue || ‘‘);
13                 };
14                 // Listen for change events to enable binding
15                 element.on(‘blur keyup change‘, function() {
16                     scope.$apply(readViewText);
17                 });
18                 // No need to initialize, AngularJS will initialize the text based on ng-model attribute
19                 // Write data to the model
20                 function readViewText() {
21                     var html = element.html();
22                     // When we clear the content editable the browser leaves a <br> behind
23                     // If strip-br attribute is provided then we strip this out
24                     if (attrs.stripBr && html === ‘<br>‘) {
25                         html = ‘‘;
26                     }
27                     ngModel.$setViewValue(html);
28                 }
29             }
30         }
31     }])

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

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

双向绑定就可以用了。

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

标签:events   function   ict   lis   自定义   通过   value   link   cti   

原文地址:http://www.cnblogs.com/kaidarwang/p/6891032.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!