Javascript 我的自定义输入字段指令不适用于更改事件

我有这个自定义指令：

eDiscovery.directive('customHighlightUsername', function () {

  return {

    restrict: 'A',

    link: function ($scope, elem, attrs) {

      elem.bind('change', function () {
        console.log('bind works');       // this does not work
      });

      elem.on('blur', function () {
        console.log('blur works');       // this works
      });

      elem.on('change', function () {
        console.log('change works');    // this does not work
      });

    }
  }
});

这是我的HTML：

   <input custom-highlight-username
     type="text"
     style="display: initial;"
     ng-model="assignSelectedQuestionsInput"
     placeholder="Assign users to selected questions:"
     class="form-control">

无论出于何种原因，我的指令中的

on（'blur'）

回调正在工作，但是

on（'change'）

和

bind（'change'）

回调没有按预期启动。如您所见，这是一个文本输入字段-当在字段中输入新字符时，我希望会触发更改回调

---

有人知道为什么会这样吗

您可以通过像这样使用

$scope.$watch

来实现这一点。在AngularJS中，当

ng change

不可用时，这是收听

ngModel

更改的常用方式

看法

---

从您发布的内容来看，更改事件应该可以。现在，通过代码更新值时不会触发更改事件

函数customHighlightUsername（）{
返回{
限制：“A”，
链接：功能（范围、要素、属性）{
元素绑定（“更改”，函数（）{
console.log（'change'）；
});
元素绑定（“模糊”，函数（）{
console.log（'blur'）；
});
元素绑定（“输入”，函数（）{
console.log（'input'）；
});
}
}
}
角度模块（'myApp'，[]）；
有棱角的
.module（'myApp'）
.指令（'customHighlightUsername'，customHighlightUsername）

我用你的代码创建了一个演示，没有问题。。。。“改变”和“模糊”都被叫来了。嗨，林，我打算添加我自己的答案，这会采纳你的答案，并用更多的细节来补充它，我对你的答案投了赞成票，我会在我的答案中提到你的答案。无论如何，我可能会接受你的答案，让我在周一开始吧。我每次都听到这个。我们在一个视图中使用了超过1k的手表，它仍然运行良好。请给我一个链接，告诉我限制。需要一个观察者通常意味着一个糟糕的架构。只是好奇，$scope传递给link方法，与控制器中的$scope相同吗？这对我来说很有效，我很惊讶我问题中的设置不起作用。然而，一旦我得到newValue/oldValue——我需要调用一个控制器方法，我该怎么做呢？传递给链接指令的$scope与HTML中的控制器的$scope不同。@AlexanderMills已更新。现在，您可以在指令内调用ctrl函数。我不知道你为什么需要这个，但它是有效的我知道我会因为说它有效而被否决，只是得到了一个可运行的例子。哈哈=）。。美好的但是，当指令被销毁时，事件绑定也会被销毁吗？仍在等待$watch限制（示例=），因此您将连接销毁。这不是OP问题的一部分。不需要手表。OPs代码中的某个地方有一个错误，手表不是答案。
$watch
将在指令被销毁时销毁，而您的绑定将在指令被销毁或重新分配后保留/或堆叠（糟糕的体系结构）。你还没有回答我的问题。请告诉我$watch的限制，并解释为什么绑定堆栈（您的解决方案）比$watch更好。
<div ng-controller="MyCtrl">
  <input custom-highlight-username
       type="text"
       style="display: initial;"
       ng-model="assignSelectedQuestionsInput"
       callback="someFunction(param)"
       placeholder="Assign users to selected questions:"
       class="form-control">
</div>

var myApp = angular.module('myApp',[]);

myApp.controller('MyCtrl', function ($scope) {
        $scope.someFunction = function (someParam) {
        console.log(someParam);
    }
});

myApp.directive('customHighlightUsername', function ($timeout) {

  return {

    restrict: 'A',
    scope: {
      "model": '=ngModel',
      "callbackFunction": '&callback' 
    },


    link: function (scope, elem, attrs) {

        scope.$watch('model', function (newValue, oldValue) {
          if (newValue && oldValue) {
            console.log('changed');
            scope.callbackFunction({ param: 'log test'});
          }
        });

        elem.on('blur', function () {
          console.log('blur works');
        });
    }
  }
});