i have following pagedown directive. how can set directive dirty whenever change/edit textarea?
app.directive('pagedown', ['$compile', '$timeout', 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 { restrict: "e", scope: { content: "=", modal: '=modal' }, link: function (scope, ielement, attrs) { var editoruniqueid; if (attrs.id == null) { editoruniqueid = nextid++; } else { editoruniqueid = attrs.id; } var newelement = $compile( '<div>' + '<div class="wmd-panel">' + '<div data-ng-hide="modal.wmdpreview == true" id="wmd-button-bar-' + editoruniqueid + '"></div>' + '<div>' + '<textarea data-ng-hide="modal.wmdpreview == true" class="wmd-input" id="wmd-input-' + editoruniqueid + '" ng-model="content" >' + '</textarea>' + '</div>' + '</div>' + '</div>')(scope) ; ielement.append(newelement); var = angular.isfunction(scope.help) ? scope.help : function () { alert("do need help?"); }; var editor = new markdown.editor(converter, "-" + editoruniqueid, { handler: }); var editorelement = angular.element(document.getelementbyid("wmd-input-" + editoruniqueid)); editor.hooks.chain("onpreviewrefresh", function () { // wire changes caused user interaction pagedown controls // , within $apply $timeout(function () { scope.content = editorelement.val(); }); }); editor.run(); } } }]); in html:
<pagedown class="pagedown-admin" modal="ahs.modal" content="ahs.modal.data.text"></pagedown> right textarea being set $dirty not whole pagedown directive. can please point me doing wrong?
a directive cannot $dirty, not without manual hacking or correct element type.
an input, textarea, form can become $dirty , receive ng-dirty class (so yes, directive element either of these - full directive can $dirty, if that's how 1 reason it).
what replace directive element form element, , manipulation of input controls within said form set appropriate $dirty flah / dirty class on form.
like so:
.directive('', function () { return { replace: true, template: '<form name="myform"></form>' } }); however, replace is deprecated (you can still use it, now).
instead, suggest wrap contents of newelement form instead of div, , live fact entire directive template wont marked $dirty.
var newelement = $compile( '<form name="myform">' + '<div class="wmd-panel">' + '<div data-ng-hide="modal.wmdpreview == true" id="wmd-button-bar-' + editoruniqueid + '"></div>' + '<div>' + '<textarea data-ng-hide="modal.wmdpreview == true" class="wmd-input" id="wmd-input-' + editoruniqueid + '" ng-model="content" >' + '</textarea>' + '</div>' + '</div>' + '</form>')(scope) ; might ask goal of of is?
if really looking set directive $dirty (alas, not understand why) - (with above changes in mind):
scope.$watch('myform.$dirty', function (v) { attrs.$set('dirty', !!v); }); you cannot set $dirty attribute on containing directive element, $dirty not valid attribute name. believe that's close get.
edit
based on comments below, conclusion must've somehow forgotten name form (or ngform).
without name property set, won't have access forms $dirty flag in scope. classes set if in inspector, flags available if expose form object on $scope (done naming it).
try following:
<form name="myform"> <pagedown-directive></pagedown-directive> <button ng-disabled="!myform.$dirty"></button> </form> that should ever enable button if myform.$dirty true. isolate scopes don't break flow of things inside form experience/what can see, should covered there.
here's jsbin showcasing how work.
Comments
Post a Comment