我用Vojta's angularJS directive但有時ckeditor無法顯示服務中的數據。這幾乎從來沒有發生刷新,但往往導航回到頁面時發生。我能夠驗證$ render函數總是用正確的數據調用ck.setData,但有時它不會顯示。angularjs ckeditor指令有時無法加載服務中的數據
11
A
回答
11
看起來$ render方法有時在ckeditor準備好之前調用。我可以通過向instanceReady事件添加一個偵聽器來解決這個問題,以確保它在ckeditor準備好後至少被調用一次。
ck.on('instanceReady', function() {
ck.setData(ngModel.$viewValue);
});
爲了完整性,這裏是我使用的完整指令。
//Directive to work with the ckeditor
//See http://stackoverflow.com/questions/11997246/bind-ckeditor-value-to-model-text-in-angularjs-and-rails
app.directive('ckEditor', function() {
return {
require: '?ngModel',
link: function(scope, elm, attr, ngModel) {
var ck = CKEDITOR.replace(elm[0],
{
toolbar_Full:
[
{ name: 'document', items : [] },
{ name: 'clipboard', items : [ 'Cut','Copy','Paste','PasteText','PasteFromWord','-','Undo','Redo' ] },
{ name: 'editing', items : [ 'Find','Replace','-','SpellChecker', 'Scayt' ] },
{ name: 'forms', items : [] },
{ name: 'basicstyles', items : [ 'Bold','Italic','Underline','Strike','Subscript','Superscript' ] },
{ name: 'paragraph', items : [
'NumberedList','BulletedList','-','JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock' ] },
{ name: 'links', items : [] },
{ name: 'insert', items : [ 'SpecialChar' ] },
'/',
{ name: 'styles', items : [ 'Styles','Format','Font','FontSize' ] },
{ name: 'colors', items : [] },
{ name: 'tools', items : [ 'Maximize' ] }
]
,
height: '290px',
width: '99%'
}
);
if (!ngModel) return;
//loaded didn't seem to work, but instanceReady did
//I added this because sometimes $render would call setData before the ckeditor was ready
ck.on('instanceReady', function() {
ck.setData(ngModel.$viewValue);
});
ck.on('pasteState', function() {
scope.$apply(function() {
ngModel.$setViewValue(ck.getData());
});
});
ngModel.$render = function(value) {
ck.setData(ngModel.$viewValue);
};
}
};
});
3
function updateModel() {
scope.$apply(function() {
if (ck.getData().length) {
ngModel.$setViewValue(ck.getData());
}
});
}
看到全碼:
return {
require: '?ngModel',
scope: true,
link: function (scope, element, attr, ngModel) {
if (!ngModel) return;
var ck = CKEDITOR.replace(element[0]);
ck.on('instanceReady', function() {
ck.setData(ngModel.$viewValue);
});
function updateModel() {
scope.$apply(function() {
if (ck.getData().length) {
ngModel.$setViewValue(ck.getData());
}
});
}
ck.on('pasteState', updateModel);
ck.on('change', updateModel);
ck.on('key', updateModel);
ck.on('dataReady', updateModel);
ngModel.$render = function() {
ck.setData(ngModel.$modelValue);
};
}
}
0
我也滿足了這個問題 當我發現了一個新的指令。這對我來說很有效!!!
請試試這個:
return {
require: '?ngModel',
scope: true,
link: function (scope, element, attr, ngModel) {
if (!ngModel) return;
var ck = CKEDITOR.replace(element[0]);
ck.on('instanceReady', function() {
ck.setData(ngModel.$viewValue);
});
function updateModel() {
scope.$apply(function() {
if (ck.getData().length) {
ngModel.$setViewValue(ck.getData());
}
});
}
ck.on('pasteState', updateModel);
ck.on('change', updateModel);
ck.on('key', updateModel);
ck.on('dataReady', updateModel);
ngModel.$render = function() {
ck.setData(ngModel.$modelValue);
};
}
};
相關問題
- 1. AngularJS無法從服務加載數據
- 2. AngularJS從服務中加載數據
- 3. angularJS:無法加載自定義服務?
- 4. AngularJs從指令中的服務響應中操作數據
- 5. 在AngularJS中延遲加載數據的指令
- 6. 無法從指令angularjs中的Firebase中獲取數據
- 7. AngularJS指令在數據開始時無法識別 -
- 8. 調用函數指令被加載angularjs
- 9. Angularjs控制器無法加載來自cachefactory服務的http數據
- 10. Angularjs控制器,指令和服務之間的數據綁定
- 11. Angular指令。 NgTable數據加載
- 12. 將服務注入指令AngularJS和數據綁定。
- 13. X-editable和angularjs指令,不綁定服務器數據
- 14. AngularJS指令有時不叫
- 15. 無法從angularjs中的數組加載數據
- 16. 我無法獲取AngularJS來加載我的服務
- 17. $超時服務數據刷新無法正常工作(Angularjs)
- 18. 無法將服務器端數據重新加載到表中
- 19. AngularJS加載REST API服務
- 20. 加載第一頁加載服務 - AngularJS
- 21. ngroute後指令無法正確加載
- 22. 在angularjs的指令中使用服務函數
- 23. ES6 AngularJS指令<>服務通信
- 24. Angularjs Uncaught ReferenceError注入服務指令
- 25. Angularjs指令不從服務更新
- 26. AngularJS:將服務值綁定到指令
- 27. 無法加載在FF服務器數據的IE僅
- 28. AngularJS - 通過服務從指令更新控制器數據(this.model語法)
- 29. 無法在角度視圖中加載的指令
- 30. 無法更新angularjs指令的內容
此解決方案是否繼續爲您的網站工作?我試着讓它工作在幾種方式(包括你的方式),而且內容會間歇性地加載失敗。 – keepitreal 2014-02-21 22:52:59