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

发布时间：2020-12-17 07:26:05 所属栏目：安全来源：网络整理

导读：我有以下pagedown指令.每当我更改/编辑textarea时,如何将我的指令设置为脏？ app.directive('pagedown',['$compile','$timeout',function ($compile,$timeout) {var nextId = 0;var converter = Markdown.getSanitizingConverter();converter.hooks.chain("p

我有以下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指令.有人可以指点我做错了吗？

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

输入,textarea,form可以变成$dirty,然后接收ng-dirty类(所以是的,一个指令,其中元素是这些中的任何一个 – 完整的指令可以是$dirty,如果这是一个人想要推理的方式它).

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

像这样：

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

但是,请替换is deprecated(您现在仍可以使用它).

相反,我建议你用一个表单而不是一个div来包装newElement的内容,并且认为你的整个指令模板不会被标记为$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.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!