Google pagedown AngularJS 指令 [英] Google pagedown AngularJS directive
问题描述
有关此问题的改进解决方案，请参阅问题底部
我已经尝试了一段时间来获取向下翻页工作的指令.这与 stackoverflow 使用的编辑器完全相同.Stackoverflow 在此处提供此代码:
https://code.google.com/p/pagedown/
互联网上有一些版本，但没有一个很好用.我需要的是一个将与所有编辑器按钮一起出现的按钮，就像 stackoverflow 一样，在内联编码时以及作为 ngRepeat 的一部分内联时.
我想让这个指令在使用 Angular 1.2.7 版内联编码以及在 ng-repeat 中时起作用.需要的是，当模型数据更改时，指令需要更新 pagedown 视图以显示新的问题和答案.当用户更改 pagedown 编辑区域时，指令需要能够更新模型.当用户单击 [save] 时，模型数据需要保存到数据库中(或至少保存到另一个对象以确认它有效).
该指令需要能够响应模型中的更改，并在键盘上或在编辑窗格中按下更改"按钮时将其原始数据保存到模型中.这是我到目前为止所拥有的.请注意，此版本没有 $wmdInput.on('change' 但它是所需内容的开始.
最重要的是，我想让它与 Angular 的 1.2.7 版本和 jQuery 2.0.3 一起使用请注意，我发现我的非工作代码存在差异版本 1.2.2 和 1.2.7 之间.我认为最好有任何解决方案适用于最新 (1.2.7) 版本.
更新
<块引用>我现在这个指令更简单并且解决了一些最近的问题我的内容没有显示.我强烈建议使用该指令基于接受的答案加上一些改进:https://github.com/kennyki/angular-pagedown
这是一个工作链接:
http://cssdeck.com/labs/qebukp9k
更新
- 我做了一些优化.
- 我使用 ngModel.$formatters ！不需要另一个 $watch.
- 我使用 $timeout 然后使用 scope.$apply 来避免 $digest in progress 错误.
Angular.js &性能
- 如果您达到了性能要求，则可能是您的应用程序使用了过多的 $watch/$on.
- 根据我的经验，使用 3rd 方库会导致各种低效/内存泄漏行为，主要是因为它没有在实现时考虑 angular/SPA.
- 我能够为一些库进行一些智能集成，但有些库不太适合 angular 的世界.
- 如果您的应用必须显示 1000 多个问题，您可能应该从编写自定义转发器开始，并且更喜欢动态 DOM 插入.
- Angular.js 在处理大量数据绑定时表现不佳，除非您愿意编写一些智能的低级内容(当您知道如何操作时，这实际上很有趣！).
- 再次强调，更喜欢分页！正如 Misko Hevery 所说:你不能在一个页面上向一个人显示超过 2000 条信息.超过这一切都是非常糟糕的用户界面，无论如何人类都无法处理".
- 阅读:数据绑定在 AngularJS 中是如何工作的?
- 我非常乐意为您提供帮助，但首先让我展示代码(联系我).
解决方案:
var app = angular.module('App', []);app.directive('pagedownAdmin', function ($compile, $timeout) {var nextId = 0;var 转换器 = Markdown.getSanitizingConverter();Converter.hooks.chain("preBlockGamut", function (text, rbg) {return text.replace(/^ {0,3}""" *\n((?:.*?\n)+?) {0,3}""" *$/gm，函数(整体，内部){返回<blockquote>"+ rbg(inner) + "</blockquote>\n";});});返回 {要求:'ngModel'，替换:真的，模板:'<div class="pagedown-bootstrap-editor"></div>',链接:函数(范围、iElement、属性、ngModel){var editorUniqueId;if (attrs.id == null) {editorUniqueId = nextId++;} 别的 {editorUniqueId = attrs.id;}var newElement = $compile(''+'<div class="wmd-panel">'+'<div id="wmd-button-bar-' + editorUniqueId + '"></div>'+'<textarea class="wmd-input" id="wmd-input-' + editorUniqueId + '">'+'</textarea>'+'</div>'+'<div id="wmd-preview-' + editorUniqueId + '" class="pagedown-preview wmd-panel wmd-preview"></div>'+'</div>')(范围);iElement.html(newElement);var 帮助 = 函数 () {alert("没有帮助");}var editor = new Markdown.Editor(converter, "-" + editorUniqueId, {处理程序:帮助});var $wmdInput = iElement.find('#wmd-input-' + editorUniqueId);无功初始化=假；editor.hooks.chain("onPreviewRefresh", function () {var val = $wmdInput.val();if (init && val !== ngModel.$modelValue ) {$超时(功能(){范围.$应用(函数(){ngModel.$setViewValue(val);ngModel.$render();});});}});ngModel.$formatters.push(function(value){初始化 = 真；$wmdInput.val(value);editor.refreshPreview();返回值；});editor.run();}}});
See bottom of question for an improved solution to this problem
I have been trying for some time now to get a directive for the pagedown working. This is the exact same editor used by stackoverflow. Stackoverflow make this code available here:
https://code.google.com/p/pagedown/
There are some versions out there on the internet but none work well. What I need is one that will appear with all the editor buttons just like stackoverflow both when coded inline and also when it's inline as part of an ngRepeat.
I would like to make this directive work when it's coded inline and also inside an ng-repeat using Angular version 1.2.7. What's needed is that when the model data changes the directive needs to update the pagedown views to show the new question and answers. When the user changes the pagedown edit area the directive needs to be able to update the model. When the user clicks [save] the model data needs to be saved to the database (or at least to another object to confirm it worked).
The directive needs to be able to respond to changes in the model and also save it's raw data to the model on keyup or when the 'change' button is pressed in the editing paned. Here is what I have so far. Note that this version does not have the $wmdInput.on('change' but it's a start for what is needed.
Most important I would like to have this working with version 1.2.7 of Angular and jQuery 2.0.3 Please note that I found differences with my non-working code between versions 1.2.2 and 1.2.7. I think it's best if any solution works for the latest (1.2.7) release.
Update
I now this directive which is simpler and solves some recent problems
I had with the content not showing. I would highly recommend using
this directive which is based on the answer accepted plus a few
improvements: https://github.com/kennyki/angular-pagedown
解决方案 Here is a working link:
http://cssdeck.com/labs/qebukp9k
UPDATE
- I made some optimizations.
- I use ngModel.$formatters ! no need for another $watch.
- I use $timeout and then scope.$apply to avoid $digest in progress errors.
Angular.js & Performance
- If you hit performance maybe your application is using too many $watch / $on.
- In my experience, using 3rd-party libraries can cause all sort of non efficient / memory leaking behavior, mostly because it was not implemented with angular / SPA in mind.
- I was able to do some smart integration for some libraries but some just don't fit well to angular's world.
- If your application must show 1000+ questions you should probably start with writing your custom repeater, and prefer dynamic DOM insertions.
- Angular.js will not perform well with tons of data bindings unless you are willing to write some smart lower level stuff (It's actually fun when you know how!).
- Again, prefer pagination! As Misko Hevery says: "You can't really show more than about 2000 pieces of information to a human on a single page. Anything more than that is really bad UI, and humans can't process this anyway".
- Read this: How does data binding work in AngularJS?
- I'm more than happy to help you, but First let me show the code (contact me)..
Solution:
var app = angular.module('App', []);
app.directive('pagedownAdmin', function ($compile, $timeout) {
var nextId = 0;
var converter = Markdown.getSanitizingConverter();
converter.hooks.chain("preBlockGamut", function (text, rbg) {
return text.replace(/^ {0,3}""" *\n((?:.*?\n)+?) {0,3}""" *$/gm, function (whole, inner) {
return "<blockquote>" + rbg(inner) + "</blockquote>\n";
});
});
return {
require: 'ngModel',
replace: true,
template: '<div class="pagedown-bootstrap-editor"></div>',
link: function (scope, iElement, attrs, ngModel) {
var editorUniqueId;
if (attrs.id == null) {
editorUniqueId = nextId++;
} else {
editorUniqueId = attrs.id;
}
var newElement = $compile(
'<div>' +
'<div class="wmd-panel">' +
'<div id="wmd-button-bar-' + editorUniqueId + '"></div>' +
'<textarea class="wmd-input" id="wmd-input-' + editorUniqueId + '">' +
'</textarea>' +
'</div>' +
'<div id="wmd-preview-' + editorUniqueId + '" class="pagedown-preview wmd-panel wmd-preview"></div>' +
'</div>')(scope);
iElement.html(newElement);
var help = function () {
alert("There is no help");
}
var editor = new Markdown.Editor(converter, "-" + editorUniqueId, {
handler: help
});
var $wmdInput = iElement.find('#wmd-input-' + editorUniqueId);
var init = false;
editor.hooks.chain("onPreviewRefresh", function () {
var val = $wmdInput.val();
if (init && val !== ngModel.$modelValue ) {
$timeout(function(){
scope.$apply(function(){
ngModel.$setViewValue(val);
ngModel.$render();
});
});
}
});
ngModel.$formatters.push(function(value){
init = true;
$wmdInput.val(value);
editor.refreshPreview();
return value;
});
editor.run();
}
}
});
这篇关于Google pagedown AngularJS 指令的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
