ng-model的作用主要是双向绑定,纯粹输出的话用{{}}方法就可以了。所以ng-model一般是用在有输入功能的元素上,也就是表单和contentEditable的元素上。
要在contentEditable元素上使用需要增加一个directive。
.directive('contenteditable',[ '$window',function() {
return {
restrict : 'A',require : '?ngModel',// 此指令所代替的函数
link : function(scope,element,attrs,ngModel) {
if (!ngModel) {
return;
} // do nothing if no ng-model
// 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.f2er.com/angularjs/146527.html