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:
- Directly inside my HTML
- 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 与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…