angularjs - 如何为 input 和 contenteditable 编写 Angular 指令

Question

我的 html 以两种形式输入，input并且contenteditable div. 我想编写一个同时处理两者的指令，但是我找不到一种方法来确定哪个标签调用了该函数（因为 Angular 的 JQLite 不提供 is() 或 get() 函数）。如果我能够计算出评估 IS_INPUT_TAG，则以下代码将是完整的：

function funct() { return {
    require: 'ngModel',
    link: function(scope, element, attrs, ctrl) {
        // view -> model
        element.bind('input', function() {
            scope.$apply(function() {
                    if(IS_INPUT_TAG)
                      ctrl.$setViewValue(element.val());
                    else
                          ctrl.$setViewValue(element.text());
                scope.watchCallback(element.attr('data-ng-model'));
            });
          });
        // model -> view
        ctrl.$render = function() {
            if(IS_INPUT_TAG)
                  element.val(ctrl.$viewValue);
             else
                  element.text(ctrl.$viewValue);
        };
     }};
}

app.directive('input', funct);
app.directive('contenteditable', funct);

Answer 1

在您的指令中，您可以使用element链接函数的参数来识别应用指令的标签。然后，您可以在 IF 条件中使用它，如下所示：

ctrl.$render = function() {
    var tagname = element["0"].tagName;

    if(tagName === "INPUT")
          element.val(ctrl.$viewValue);
    else
          element.text(ctrl.$viewValue);
};

之后，您可以简单地将指令附加到input和div标记作为标记的属性，以识别应用指令的标记。