最近要用angular做一个所见即所得的编辑器,在自定义ngModel的$render方法式,出现问题。代码如下:
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>
angular部分:
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());
});
});
}
}
});
按照教程上的说法,当viewValue的值发生变化时,ngModelCtrl.$render会被调用,包括formatters,parsers这一系列的流水线。我也是照教程上写的,但只有在指令初始化的时候render及formatters被调用了一次,然后输入时并会没有被调用,难道需要手动调用render吗,请各位大神赐教。
Êtes-vous sûr qu'il y a un événement appelé
javascript
dansinput
? D'après votre commentaire, vous devez surveiller des événements tels quekeyup
,keydown
etchange