如何使Angularjs $ setViewValue在頁面的底部處理HTML

Question

正如angularjs自己的例子@https://code.angularjs.org/1.3.7/docs/api/ng/type/ngModel.NgModelController

幾個空格反覆地重新解析成     。

app.directive('contenteditable', ['$sce','$interpolate', function($sce, $interpolate) { 
    return { 
    restrict: 'A', // only activate on element attribute 
    require: '?ngModel', // get a hold of NgModelController 
    link: function(scope, element, attrs, ngModel) { 
     if (!ngModel) {return;} // do nothing if no ng-model 

     // Specify how UI should be updated 
     ngModel.$render = function() { 
     console.log("$rendering : "+ngModel.$viewValue); 
     element.html(ngModel.$viewValue); 
     console.log("new html: "+element.html()); 
     window.setTimeout(function() {console.log("delayed new html: "+element.html());}, 500); 
     }; 

     // Listen for change events to enable binding 
     element.on('blur keyup change', function() { 
     scope.$evalAsync(read); 
     }); 
     //read(); // initialize 
     ngModel.$setViewValue($interpolate(element.html())(scope)); 
     ngModel.$render(); 

     // Write data to the model 
     function read() { 
     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 = ''; 
     } 
     console.log('setViewValue = '+html); 
     ngModel.$setViewValue(html); 
     ngModel.$render(); 
     } 
    } 
    }; 
}]); 

回報

*.js:75 setViewValue =   
*.js:53 $rendering :   
*.js:55 new html:   
*.js:56 delayed new html:    
*.js:75 setViewValue =    
*.js:53 $rendering :    
*.js:55 new html:    
*.js:56 delayed new html:    
*.js:75 setViewValue =     
*.js:53 $rendering :     
*.js:55 new html:     
*.js:56 delayed new html:     

如果我做ngModel.$setViewValue(html+'<span></span>');我得到適當的HTML，但它變得像錯位和&nbsp; &nbsp; <span></span><span></span><span></span><span></span>仍然破壞了模型的價值。

所以我可以得到$ setViewValue接受HTML或我可以刪除<span></span>而不破壞HTML？

Answer 1

顯然，當我做

ngModel.$setViewValue($interpolate(element.html())(scope)); 
ngModel.$render(); 

或只是

ngModel.$setViewValue($interpolate(element.html())(scope)); 

失敗都歸結到模型如何被初始化

。但是，如果我做到這

ngModel.$render(); 

然後它工作完美，甚至不需要那些愚蠢<span></span>秒。

所以生成的代碼看起來像

app.directive('contenteditable', [function() { 
    return { 
    restrict: 'A', // only activate on element attribute 
    require: '?ngModel', // get a hold of NgModelController 
    link: function(scope, element, attrs, ngModel) { 
     if (!ngModel) {return;} // do nothing if no ng-model 

     ngModel.$render = function() { 
     element.html(ngModel.$viewValue); 
     }; 

     element.on('blur keyup change', function() { 
     scope.$evalAsync(read); 
     }); 
     ngModel.$render(); 

     function read() { 
     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); 
     } 
    } 
    }; 
}]);