Baru-baru ini, saya menggunakan sudut untuk membuat editor WYSIWYG Apabila saya menyesuaikan kaedah $render ngModel, masalah berlaku. Kodnya adalah seperti berikut:
bahagian html:
<p ng-controller="EditController">
<p contenteditable="true" edit-box ng-model="vm.content" style="width: 300px; height: 100px;border: 1px solid dodgerblue;"></p>
<p ng-bind-html="vm.content|trustAsHtml"></p>
</p>
bahagian sudut:
angular.module('myApp',[])
.controller('EditController',function($scope){
$scope.vm={
content:''
};
})
.filter('trustAsHtml',function($sce){
return function(content){
return $sce.trustAsHtml(content);
}
})
.directive('editBox',function(){
return {
restrict:'EA',
require:'ngModel',
link:function(scope,element,attr,ngModelCtrl){
if(!ngModelCtrl)return;
//覆盖默认的$render方法
ngModelCtrl.$render=function(){
element.html(ngModelCtrl.$viewValue);
};
//向formatters流水线增加一个格式化方法
ngModelCtrl.$formatters.unshift(function(value){
console.log(value);
return value;
});
//绑定输入事件监听,当输入时,改变ngModel的值
element.bind('input',function(){
scope.$apply(function(){
ngModelCtrl.$setViewValue(element.html());
});
});
}
}
});
Menurut tutorial, apabila nilai viewValue berubah, ngModelCtrl.$render akan dipanggil, termasuk satu siri saluran paip seperti pemformat dan penghurai. Saya juga menulisnya mengikut tutorial, tetapi render dan pemformat hanya dipanggil sekali semasa permulaan arahan, dan kemudian mereka tidak dipanggil semasa menaip Adakah saya perlu memanggil render secara manual.
Adakah anda pasti ada acara yang dipanggil
javascript
dalaminput
? Menurut ulasan anda, anda harus memantau acara sepertikeyup
,keydown
,change