如何将pagedown指令设置为$ dirty？

Question

我有以下pagedown指令。每当我更改/编辑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 help = angular.isFunction(scope.help) ? scope.help : function () {
            alert("Do you need help?");
        };

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

        var editorElement = angular.element(document.getElementById("wmd-input-" + editorUniqueId));

        editor.hooks.chain("onPreviewRefresh", function () {
            // wire up changes caused by user interaction with the pagedown controls
            // and do within $apply
            $timeout(function () {
                scope.content = editorElement.val();
            });
        });

        editor.run();
    }
}
}]);

在HTML中：

<pagedown class="pagedown-admin"
          modal="ahs.modal"
          content="ahs.modal.data.text"></pagedown>

现在只有textarea被设置为$ dirty而不是整个pagedown指令。有人可以指点我做错了吗？

Answer 1

指令不能是$dirty，不能没有手动黑客攻击或正确的元素类型。

input，textarea，form可以成为$dirty，然后会收到ng-dirty类（是的，这个元素要么是指令其中 - 完整的指令可能是肮脏的，如果那是一个人如何推理它的话。

你可以做的是用一个form元素替换指令元素，并且对所述表单中的输入控件的任何操作都会设置相应的$ dirty flah / dirty类。形成。

像这样：

.directive('', function () {
  return {
    replace: true, 
    template: '<form name="myForm"></form>'
  }
});

但是，请替换is deprecated （您现在仍可以使用它）。

相反，我建议你用newElement而不是form来包装div的内容，并接受整个指令模板不会<的事实/ em>标记为$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)
;

我可能会问这一切的目标是什么？

如果你真的希望将指令设置为$dirty（唉，我不明白为什么） - 你可以做这样的事情（与记住上述变化）：

 scope.$watch('myForm.$dirty', function (v) {
   attrs.$set('dirty', !!v);
 });

您不能将$dirty设置为包含指令元素的属性，因为$dirty不是有效的属性名称。我相信你会得到尽可能接近的。

修改

根据以下评论，我唯一的结论是，您必须忘记命名您的表单（或ngForm）。

如果没有设置名称属性，您将无法访问范围中的表单$dirty标记。如果查看检查器，将设置类，但只有在$scope上公开表单对象（通过命名完成）时，标记才可用。

尝试以下方法：

<form name="myForm">
  <pagedown-directive></pagedown-directive>
  <button ng-disabled="!myForm.$dirty"></button>
</form>

如果myForm.$dirty为true，则应该只启用该按钮。隔离范围不会从我的经验/我所看到的内容中打破表单内部事物的流动，因此您应该被覆盖在那里。

这里有一个JSBin展示了它的运作方式。