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标记作为标记的属性，以标识应用该指令的标记。

如何为输入和contenteditable编写Angular指令

1 个答案: