Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
418 views
in Technique[技术] by (71.8m points)

angularjs - Inside my directive a scope.$apply(function () getting called in Angular 1.2.2 but not Angular 1.2.7

I have the following directive:

app.directive('pagedownAdmin', function ($compile) {
    var nextId = 0;
    var markdownConverter = new Markdown.Converter();
    var converter1 = Markdown.getSanitizingConverter();

    converter1.hooks.chain("preBlockGamut", function (text, rbg) {
        return text.replace(/^ {0,3}""" *
((?:.*?
)+?) {0,3}""" *$/gm, function (whole, inner) {
            return "<blockquote>" + rbg(inner) + "</blockquote>
";
        });
    });

    return {
        require: 'ngModel',
        replace: true,
        scope: {
            modal: '=modal',
            ngModel: '=',
            pid: '=pid'
        },
        template: '<div class="pagedown-bootstrap-editor"></div>',
        link: function (scope, element, attrs, ngModel) {

            var editorUniqueId;

            if (attrs.id == null) {
                editorUniqueId = nextId++;
            } else {
                editorUniqueId = attrs.id;
            }

            var template = '<div>' +
            '<div class="wmd-panel">' +
            '<div data-ng-hide="modal.wmdPreview == true" id="wmd-button-bar-' + editorUniqueId + '"></div>' +
            '<textarea data-ng-hide="modal.wmdPreview == true" class="wmd-input" id="wmd-input-' + editorUniqueId + '">' +
            '</textarea>' +
            '</div>' +
            '<div data-ng-show="modal.wmdPreview == true" id="wmd-preview-' + editorUniqueId + '" class="pagedown-preview wmd-panel wmd-preview">test div</div>' +
            '</div>';

            element.html($compile(template)(scope));

            var converter = new Markdown.Converter();

            var help = function () {
                var rawContent = $wmdInput.val();
                scope.$apply(function () {
                    ngModel.$setViewValue(rawContent);
                });
            }

            var editor = new Markdown.Editor(converter1, "-" + editorUniqueId, {
                handler: help
            });

            editor.run();

            var $wmdInput = $("#wmd-input-" + editorUniqueId);

            $wmdInput.on('keyup', _.debounce(function () {
                rawContent = $wmdInput.val();          // LINE 1
                scope.$apply(function () {             
                    ngModel.$setViewValue(rawContent); // LINE 2
                });
            }, 500));

        }
    }
});

There are two ways I use this directive:

  1. Directly inside my HTML
  2. Inside a ng-repeat

Here's what happens with the two versions of Angular

  • With version 1.2.2 of Angular inside the HTML and inside the ng-repeat it goes to LINE1 and LINE2
  • With version 1.2.7 of Angular inside the HTML it goes to LINE1 and LINE2
  • With version 1.2.7 of Angular inside the HTML it goes to LINE1

Can someone give me some advice on why this is. I have had to return my code to 1.2.2 to get it to work again.

Update

I simplified the code for testing to:

        $wmdInput.on('keyup', function () {
            console.log("Before change: ngModel.$modelValue:" + ngModel.$modelValue);
            console.log("Before change: ngModel.$viewlValue:" + ngModel.$viewlValue);
            var rawContent = $wmdInput.val();
            ngModel.$setViewValue(rawContent);
            console.log("After change: ngModel.$modelValue:" + ngModel.$modelValue);
            console.log("After change: ngModel.$viewlValue:" + ngModel.$viewlValue);
        });

I first entered a letter "q" and then a letter "x" with version 1.2.3:

efore change: ngModel.$modelValue:zzx pagedownAdmin.js:68
Before change: ngModel.$viewlValue:undefined pagedownAdmin.js:69
After change: ngModel.$modelValue:q pagedownAdmin.js:72
After change: ngModel.$viewlValue:undefined pagedownAdmin.js:73
Before change: ngModel.$modelValue:zzx pagedownAdmin.js:68
Before change: ngModel.$viewlValue:undefined pagedownAdmin.js:69
After change: ngModel.$modelValue:x pagedownAdmin.js:72
After change: ngModel.$viewlValue:undefined pagedownAdmin.js:73

It seems that every time the ngModel is set but then next time it goes into the key handler the value is the original value.

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)
Waitting for answers

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...