Question

我正在使用editable-text模块中的xeditable指令用于AngularJS。有没有办法禁用整个页面的指令？

我考虑过使用{{variable}}替换可编辑文本，其中variable="editable-text"启用，variable="somethingElse"禁用。但是，这会在html中产生无意义的属性。

Answer 1

可以使用另一个指令删除指令。为此，新指令应该比被删除的指令具有更高的优先级，然后在编译状态下，您搜索具有required指令的元素，并整体删除tag / class / element。这是一个非常简单的实现：

.directive("disableDirective", function () {
    function compile (el, attr) {
        var hasDirective = el[0].querySelectorAll("["+attr.disableDirective+"]");

        [].forEach.call(hasDirective, function (el) {
            el.removeAttribute(attr.disableDirective);
        });
    }

    return {
        priority: 100000,
        compile: compile
    };
})

在下面的HTML中，DIV将可见，这要归功于我们的指令：

<body disable-directive="ng-hide">
  <div ng-hide="true">Hidden</div>
</body>

您必须为页面设置disable-directive="editable-text"。

JSBin

Answer 2

如果你只想永远关闭所有应用程序中的这个指令，我知道两种方式：

为此指令创建装饰器，只需将compile函数设置为空函数，例如到angular.noop。请查看此内容以获取更多信息：https://docs.angularjs.org/api/auto/service/$provide#decorator。
或者您也可以创建具有相同名称和限制的指令（A | E | C | M），但优先级更高，terminal属性设置为true。但是你应该始终记住，该指令将关闭同一元素上具有较低优先级的所有指令。（所以这个解决方案看起来像我的反模式）

Answer 3

我相信您可以使用装饰器删除限制字段。这将禁用该指令。以下是使用ng-show

的示例

var app = angular.module("app", []);

//disable ng-show
app.config(function($provide) {
  $provide.decorator('ngShowDirective', function($delegate) {
    var directive = $delegate[0];

    directive.restrict = ""; 
    return $delegate;
  });
});

AngularJS禁用指令

3 个答案: