无法在 Kendo 网格中的指令中注入 Angular ngModel

Question

我正在尝试添加一个输入指令，以便 trim 所有文本输入。到目前为止，这是我的指令代码：

app.directive("input", function directive() {
  return {
    restrict: "E",
    priority: 1,
    require: "ngModel",
    link: function link(scope, element, attrs, ctrl) {
      element.on("focusout", function triggerChange(event) {
        var input = event.target;
        if (input.value && input.type === "text") {
          ctrl.$setViewValue(input.value.trim());
          ctrl.$render();
        }
      });
    }
  };
});

我的问题是 ngModel 似乎没有被注入，因为我收到错误： Error: [$compile:ctreq] Controller 'ngModel', required by directive 'input', can't be found!

知道为什么会发生这种情况，以及如何解决它吗？

更新：

其实这是KendoGrid和AngularJS的交互。我正在测试的输入是由 Kendo Grid 生成的。列的代码是标准的：

{ field: "name", title: "titleName" }

Answer 1

您的 HTML 中必须有一些 input 元素，但没有 ng-model.

您可以将代码更改为 require: "?ngModel",，然后检查 ctrl 是否为 undefined，例如：

app.directive("input", function directive() {
  return {
    restrict: "E",
    priority: 1,
    require: "?ngModel",
    link: function link(scope, element, attrs, ctrl) {
      if (!ctrl) { return ;}
      element.on("focusout", function triggerChange(event) {
        var input = event.target;
        if (input.value && input.type === "text") {
          ctrl.$setViewValue(input.value.trim());
          ctrl.$render();
        }
      });
    }
  };

Answer 2

当你使用这个指令时，你应该在你的 html 中提供 ng-model，因为你在指令中写了 require: 'ngModel',。所以在你的情况下你的指令名称是输入所以它会像

<input ng-model="something"> </input>

Answer 3

我的答案并不完美，但这是我能找到的最好的答案：

app.directive("input", function directive() {
  return {
    restrict: "E",
    priority: 1,
    require: "ngModel",
    link: function link(scope, element, attrs, ctrl) {
      element.on("focusout", function triggerChange(event) {
        var input = $(event.target);
        input.val(input.val().trim());
        input.trigger("change");
      });
    }
  };
});

所以基本上，我们 trim 输入，并使用 input.trigger("change") 通知系统输入已更改。

虽然是一个警告，但它不适用于我们的验证系统 (valdr)。

无法在 Kendo 网格中的指令中注入 Angular ngModel

Cannot inject an Angular ngModel in directive in Kendo Grid

angularjs

kendo-grid

angularjs-directive