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

Question

我有以下 pagedown 指令。每当我更改/编辑文本区域时，如何将指令设置为脏？

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类(所以是的，一个指令，其中元素是其中之一 - 完整的指令可以是 $dirty，如果这是一个人想要的推理方式)。

你可以做的是用 form 替换指令元素元素，并且对所述表单内的输入控件的任何操作都会在表单上设置适当的 $dirty flah/dirty 类。

像这样:

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

但是，替换 is deprecated (你现在仍然可以使用它)。

相反，我建议您将 newElement 的内容包装起来。与 form而不是 div ，并接受整个指令模板不会被标记为 $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展示它是如何工作的。