首页 > 代码库 > 玩转angularJs——通过自定义ng-model，不仅仅只是input可以有双向绑定
玩转angularJs——通过自定义ng-model，不仅仅只是input可以有双向绑定
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-model10 // Specify how UI should be updated11 ngModel.$render = function() {12 element.html(ngModel.$viewValue || ‘‘);13 };14 // Listen for change events to enable binding15 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 attribute19 // Write data to the model20 function readViewText() {21 var html = element.html();22 // When we clear the content editable the browser leaves a <br> behind23 // If strip-br attribute is provided then we strip this out24 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可以有双向绑定
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。