angularjs输入框自动变化高度（可输入div并运用ng-model）附带placeholder效果

angular其实不再需要input和textarea标签来做输入功能，只需要给div加个h5属性contenteditable="true"即可使用ng-model实现双向绑定，和高度自适应的功能，

苹果手机不支持h5属性 contenteditable="true"，需要在这个div中添加样式-webkit-user-select:text 

这里的ng-model只能绑定对象中的某一个元素，如ng-model=“content.item”

　　　div{

　　　　　-webkit-user-select:text;　

　　　}

 

 　　 /*为空时显示 element attribute content*/

 

    div :empty:before{

 

      content: attr(placeholder);   /* element attribute*/

 

      color:#red;              /*content: 'this is content';*/

 

    }

 

    /*焦点时内容为空*/

 

    div :focus:before{

 

      content:none;

 

    }

 

html代码

<div contenteditable="true" class="texttitle zkht-create-answer" ng-model="content.item"></div>

 

directive.js

app.directive('contenteditable', function() {
　　return {
　　　　restrict: 'A', // 只用于属性
　　　　require: '?ngModel', // get a hold of NgModelController
　　link: function(scope, element, attrs, ngModel) {
　　　　if (!ngModel) {
　　　　　　return;
　　　　} 
　　　　// 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);
　　　　}
　　}
};

转载于:https://www.cnblogs.com/cutone/p/5859336.html