当前位置: 首页 > 面试题库 >

Google Pagedown AngularJS指令

皇甫喜
2023-03-14
问题内容

有关此问题的改进解决方案,请参阅问题底部

我已经尝试了一段时间,以获取有关pagedown工作的指令。这是stackoverflow使用的完全相同的编辑器。Stackoverflow使此代码在此处可用:

https://code.google.com/p/pagedown/

互联网上有一些版本,但都无法正常运行。我需要的是一个将与所有编辑器按钮一起出现的控件,就像在内联编码以及作为ngRepeat的一部分内联编码时一样,都将与stackoverflow一起出现。

我想使此指令在内联并且使用Angular版本1.2.7在ng-
repeat中进行编码时起作用。所需要的是,当模型数据发生更改时,指令需要更新Pagedown视图以显示新的问题和答案。当用户更改分页向下编辑区域时,指令需要能够更新模型。当用户单击[保存]时,需要将模型数据保存到数据库(或至少保存到另一个对象以确认其有效)。

该指令需要能够响应模型中的更改,并且还可以在键入命令时或在编辑窗格中按下“更改”按钮时将其原始数据保存到模型中。这是我到目前为止所拥有的。请注意,此版本没有$
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!不需要另外的手表。
  • 我使用$ timeout然后使用scope。$ apply来避免$ digest进行中的错误。

Angular.js和性能

  • 如果您提高了性能,则可能是您的应用程序使用了过多的$ watch / $ on。
  • 以我的经验,使用第三方库可能会导致各种无效/内存泄漏行为,主要是因为未考虑到angular / SPA的实现。
  • 我能够对某些库进行一些智能集成,但是有些库并不适合Angle的世界。
  • 如果您的应用程序 必须 显示1000多个问题,则可能应该从编写自定义中继器开始,并且更喜欢动态DOM插入。
  • 除非您愿意编写一些智能的低级内容,否则Angular.js在大量数据绑定中的性能将不佳(当您知道如何做时,这实际上很有趣!)。
  • 同样,更喜欢分页!正如Misko Hevery所说: “您不能在一个页面上向一个人真正显示超过2000条信息。除此之外,还真是糟糕的UI,而且人也无法对其进行处理”。
  • 我非常乐意为您提供帮助,但是首先让我显示代码(与我联系)。

解:

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();
        }
    }
});


 类似资料:
  • 例如,Angular 2内置的属性指令ngClass和ngStyle,可以在任何组件或元素上工作。

  • 当在汇编指令级别分析代码时,鉴于现代CPU不串行或按顺序执行指令,指令指针的位置真正意味着什么?例如,假设以下x64汇编代码: 指令指针将在哪条指令上花费大部分时间?我可以为他们所有人想出好的理由: mov-RAX,[RBX]可能需要100秒的周期,因为它是缓存未命中

  • View Example 指令与我们看到的其他指令有不同的语法。 如果你熟悉for...of语句,你会注意到,他们几乎相同。 ngFor允许您指定要迭代的iterable对象,以及在范围内引用每个项的名称。 在我们的示例中,您可以看到该 可用于插值以及属性绑定。 该指令做一些额外的解析,所以当它扩展到模板形式,它看起来有点不同: View Example 请注意,模板元素上有一个奇怪的let-ep

  • 我们可以直接将一个字符串绑定到属性。这就像添加一个html属性一样。 View Example 在这里,由于我们使用表达式绑定到指令,我们需要在方括号中包装指令名称。当你想有一个函数放在适用的类名列表时,传入数组是很有用的。 View Example 在这里我们可以看到,由于对象的 和属性是true,这些classes将会生效,但由于是false,它不会生效。

  • selector: 'app-style-example', template: ` <p style="padding: 1rem" [ngStyle]="alertStyles"> ` }) export class StyleExampleComponent { borderStyle = '1px solid black'; 'color': 're