玩转angularJs——通过自定义ng-model,不仅仅只是input可以有双向绑定
Posted Kwin
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了玩转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-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可以有双向绑定的主要内容,如果未能解决你的问题,请参考以下文章
通过使用 AngularJS 的自定义登录进行 Spring Security 身份验证
AngularJS之基础-5 路由(定义路由使用路由)自定义指令(Directive)