Question

我有一个angular指令，它允许内容可编辑的div与ng-model一起使用。看起来像这样

app.directive("contenteditable", function() {
return {
  restrict: "A",
  require: "ngModel",
  link: function(scope, element, attrs, ngModel) {

    function read() {
      ngModel.$setViewValue(element.html());
    }

    ngModel.$render = function() {
      element.html(ngModel.$viewValue || "");
    };

    element.bind("blur keyup change", function() {
      scope.$apply(read);
    });
   }
};
});

但是，每当我将其与<div contenteditable="false"></div>一起使用以初始化为false时，它仍然默认为true。我的目标是拥有可在可编辑和不可编辑之间切换的文本块，但不确定如何在不被黑客攻击的情况下覆盖此默认行为。

Answer 1

您是否尝试过通过范围传递布尔值

app.directive("contenteditable", function() {
    return {
        restrict: "A",
        require: "ngModel",
        scope: {
            disabled: @disabled
        }
        link: function(scope, element, attrs, ngModel) {

           // reference scope.disabled to access attribute
       }
   };
});

然后像这样在HTML元素中设置Disabled属性。

<div contenteditable disabled="false"></div>

Answer 2

我知道了：这是配置错误。详细的解释，但是该指令与该问题无关，因为我什至没有将其正确地附加到控制器上。我正在使用ServiceNow，因此角度配置的工作方式略有不同。我相信，当我明确指定ng-model时，它会强制contenteditable属性为true（即使我将其指定为false）。如果我没有为contenteditable指定一个值，那么即使我将contenteditable动态更改为true，ng-model也不起作用。我将指令ngContenteditable重命名，实际上将其附加到控制器，然后切换常规contenteditable属性，它可以正常工作。

如何使用angular指令防止默认属性值

2 个答案: