Google 페이지다운 각도JS지시

Google 페이지다운 각도JS지시

이 문제에 대한 개선된 해결책은 질문 하단 참조

저는 페이지 다운이 작동하는 지시를 받기 위해 지금부터 노력하고 있습니다.스택 오버플로에서 사용하는 편집기와 정확히 일치합니다.스택 오버플로를 사용하면 다음 코드를 사용할 수 있습니다.

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

인터넷에는 몇 가지 버전이 있지만 잘 작동하는 버전은 없습니다.내가 필요한 것은 인라인으로 코딩할 때와 ngRepeat의 일부로 인라인일 때 모두 스택 오버플로우처럼 모든 편집기 버튼과 함께 나타나는 것입니다.

Angular version 1.2.7을 사용하여 인라인 및 ng-repeat 내부에서 코딩될 때 이 명령이 작동하도록 하고 싶습니다.모델 데이터가 변경될 때 지침은 새로운 질문과 답변을 보여주기 위해 페이지 다운 보기를 업데이트해야 합니다.사용자가 페이지 다운 편집 영역을 변경할 때 지침은 모델을 업데이트할 수 있어야 합니다.사용자가 [저장]을 클릭하면 모델 데이터를 데이터베이스에 저장해야 합니다(또는 적어도 다른 개체에 저장하여 작동했음을 확인해야 합니다).

지침은 모델의 변경에 대응할 수 있어야 하며 키업 시 또는 편집 창에서 '변경' 버튼을 누를 때 모델에 원시 데이터를 저장할 수 있어야 합니다.여기 제가 지금까지 가지고 있는 것이 있습니다.이 버전에는 $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

갱신하다

• 몇 가지 최적화 작업을 했습니다.
• 모델을 씁니다.$matters! $watch를 추가할 필요가 없습니다.
• 저는 $timeout과 스코프를 사용합니다.$프로그레스 오류에서 $digest을 방지하기 위한 $apply.

Angular.js & Performance

• 성능이 향상되면 애플리케이션이 $watch/$on을 너무 많이 사용하고 있을 수 있습니다.
• 제 경험으로는 타사 라이브러리를 사용하는 것이 모든 종류의 비효율성/메모리 유출 동작을 일으킬 수 있는데, 이는 대부분 각도/SPA를 염두에 두고 구현되지 않았기 때문입니다.
• 나는 몇몇 도서관들을 위해 현명한 통합을 할 수 있었지만 몇몇 도서관들은 앵글의 세계에 잘 맞지 않습니다.
• 응용 프로그램에서 1000개 이상의 질문을 표시해야 하는 경우 사용자 지정 리피터 작성부터 시작해야 하며 동적 DOM 삽입을 선호해야 합니다.
• Angular.js는 몇 가지 현명한 하위 레벨의 것을 기꺼이 작성하지 않는 한 수많은 데이터 바인딩으로 성능이 좋지 않을 것입니다(방법을 알면 실제로 재미있습니다!).
• 다시 한 번, 페이지를 선호합니다!Misko Hevery가 말했듯이, "당신은 한 페이지에 약 2000개 이상의 정보를 사람에게 보여줄 수 없습니다. 그 이상의 것은 정말 나쁜 UI이며, 어쨌든 인간은 이것을 처리할 수 없습니다."
• 이 글을 읽어보기AngularJS에서 데이터 바인딩은 어떻게 작동합니까?
• 도와드리는 것만으로도 기쁘지만, 우선 코드를 보여드리겠습니다(연락주세요)

해결책:

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

변경할 수 있습니다.

scope.$watch(attrs.ngModel, function () {
var val = scope.$eval(attrs.ngModel);

다음의 경우:

scope.$watch(attrs.ngModel, function(newValue, oldValue) {
  var val = newValue;
});

추가적으로 이 코드에 대한 코멘트를 시도해 볼 수 있습니다.

if (val !== undefined) {
    $wmdInput.val(val);
    ...    

}

저는 그것이 이상한 행동과 관련이 있다고 생각합니다.

정답이 아닐 수도 있지만 마크다운을 사용하기 시작하면 모든 문제가 발생합니다.많은 혜택을 주지 못하는 편집자.

물론 마크다운 에디터 초보자용으로 사용해야 하지만 마크다운을 사용할 때는 어차피 초보자가 아닙니다(틀릴 수도 있습니다).

제가 이 문제에 접근한 것은 편집기를 사용하지 않고 이것의 완전한 버전을 만드는 것이었습니다.

미리보기도 있고요.

아주 간단하기도 합니다.

https://github.com/allenhwkim/wiki

---- 편집 ----
제거된
---- 편집 ----
제거된
---- 편집 ----

완벽한 편집자를 제공하기 위해 몇 시간 동안 시도하고 질문을 한 후에, 제가 얻을 수 있는 가장 간단한 것은 다음과 같습니다.이를 위해서는 $watch나 $formatter가 필요합니다.텍스트 영역에서 지정한 모든 속성으로 주어진 요소를 감싸기만 합니다.

http://plnkr.co/edit/jeZ5EdLwOfwo6HzcTAOR?p=preview

app.directive('pagedownEditor', function($compile, $timeout) {
  var num=0;
  return {
    priority: 1001, //higher than ng-repeat, 1000
    link: function(scope, el, attrs) {
      var uniqNum = scope.$index || num++;
      var wmdPanel = document.createElement('div');
      wmdPanel.className = "wmd-panel";
      var wmdButtonBar = document.createElement('div');
      wmdButtonBar.id = 'wmd-button-bar-'+uniqNum;
      wmdPanel.appendChild(wmdButtonBar);
      el.wrap(wmdPanel); // el is ng-repeat comment, it takes tim

      var converter = Markdown.getSanitizingConverter();
      var editor = new Markdown.Editor(converter, "-"+uniqNum);
      $timeout(function() {
        wmdPanel.querySelector('textarea').id = 'wmd-input-'+uniqNum;
        wmdPanel.querySelector('textarea').className += ' wmd-input';
        wmdPanel.insertAdjacentHTML('afterend', '<div id="wmd-preview-'+uniqNum+'" '
          +'class="pagedown-preview wmd-panel wmd-preview">');
        editor.run()
      }, 50);
    }
  };

데모: http://plnkr.co/edit/FyywJS?p=preview

요약

1. 제거했습니다.keyup그리고 갈고리를 달았습니다.onPreviewRefresh 모음을 됩니다가 됩니다.ng-model.

2. :$rootScope입니다를 합니다.ng-model아래쪽 밖에서

3. save 기능은 순전히 당신의 선택에 달려있습니다. 왜냐하면 당신은 접근할 수 있기 때문입니다.ng-model지금 어디에라도

언급URL : https://stackoverflow.com/questions/20908748/google-pagedown-angularjs-directive