编写/扩展/“子类化”Angular指令?

时间:2014-12-01 21:36:08

标签: javascript angularjs angularjs-directive

是否有通过扩展现有指令来创建新Angular指令的标准方法?

具体来说,我想自定义angular-contenteditable以便更好地控制编辑选项,例如阻止换行:

<h1 my-custom-content-editable prevent-newlines="true">Hello, world!</h1>

实施类似于:

app.directive("myCustomContentEditable", function() {
    return {
        link: function($scope, elem, attrs) {
            angular.element(elem).on("keydown", function($event) {
                if (attrs.preventNewlines && $event.keyCode == 13)
                    $event.preventDefault();
            });
        },

    };
})

在我的自定义指令中扩展contenteditable指令的最佳方法是什么?

请注意,我确实知道我可以在标记级别组合指令 - <h1 contenteditable my-custom-content-editable>…</h1> - 但我想知道如何创建一个扩展另一个的指令。

1 个答案:

答案 0 :(得分:0)

您没有子类/扩展指令,您可以像在示例中一样将它们组合在一起。

另一个例子:

<input ng-init="myModel = 'stuff'" ng-change="somethingElse()" ng-model="myModel" />

基本上,指令不允许继承。您可以简单地获取任何指令的原始代码并对其进行修改或组合指令以实现您正在寻找的功能。

有很多方法可以解决“扩展”问题。虽然指令......但这包括使用require,我觉得它并不完全相同。 http://thaiat.github.io/blog/2014/03/10/extending-an-existing-directive-in-angularjs/