为什么 ng-change 不适用于 angularjs 中的自定义指令 [重复]答案

【问题标题】：Why ng-change is not working on a custom directive in angularjs [duplicate]为什么 ng-change 不适用于 angularjs 中的自定义指令 [重复]
【发布时间】：2019-04-16 04:33:51
【问题描述】：

我正在研究一个知道其存储库并加载其数据的选择指令。这个指令有一个非常简单的模板。

<select></select>

我有一个编译函数，它为我们的选择添加了一个 ng-options 指令。由于 from 上的渲染元素是一个选择，我希望在我们的元素上放置一个 ng-change 指令将调用相关的更改函数，但它只被调用一次。这是我为共享代码而制作的代码 sn-p。

这也是相同代码的 plunker 版本：https://plnkr.co/edit/D8lErJWKZyrAeI6BZ7iJ

// Code goes here

var app = angular.module("myShoppingList", []); 
app.controller("myCtrl",['$scope','productsRepository', function($scope,productsRepository) {
    $scope.products =productsRepository.getAll();
    $scope.selectdProduct={};
    $scope.onSelectedProductChanged=function(item){
      alert(item);
    }
}]);

app.service("productsRepository",[function(){
  return {
    getAll:function(){return [
      {
        id:1,title:'Milk'
      },
      {
        id:2,title:'Bread'
      },
      {
        id:3,title:'Cheese'
      }
      ]}
  }
}]);

app.directive("productsComboBox",['$compile','productsRepository',function($compile,productsRepository){
  return {
    restrict:'E',
    replace:true,
    template:'<select></select>',
    scope:{
      ngModel:'='
    },
    require:'ngModel',
    compile:function(elm,atts){
      elm.attr('ng-options','item.id as item.title for item in items' );
      var fn=$compile(elm);
      return function(scope,elm,atts){
        
          fn(scope);
          scope.items=productsRepository.getAll();
          console.log(scope.items);
      }
    }
  }
}])

<!DOCTYPE html>
<html>

  <head>
    <script data-require="angular.js@*" data-semver="4.0.0" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.10/angular.min.js"></script>
    <script data-require="angular.js@*" data-semver="4.0.0" src="script.ts"></script>
    <script data-require="angular.js@*" data-semver="4.0.0" src="system.config.js"></script>
    <script data-require="angular.js@*" data-semver="4.0.0" src="tsconfig.json"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-app='myShoppingList' ng-controller='myCtrl'>
    <ul>
      <li ng-repeat='product in products'>{{product.title}}</li>
    </ul>
    <products-combo-box ng-model='selectdProduct' ng-change='onSelectedProductChanged(selectdProduct)'></products-combo-box>
  </body>

</html>

我看到过关于同一问题的其他问题，但我的问题与这些问题之间存在差异。我们的模板中没有任何根元素，因此 ng=change 被放置在我们的选择中，我们无法在指令中为我们的选择定义 ng-model 以便我们可以调用父级的 ng-change。

【问题讨论】：

不能通过指令控制器来实现吗？您正在丢失具有隔离范围等的模型。使用bindToController 并通过属性传递对函数的引用可能会更好
你能在回答中解释更多吗？
ng-change 指令仅在同一元素上有 ng-model 指令时有效。
@georgeawg 相同元素是什么意思？因为我们的组合框元素上有一个 ng-model，当它被替换时，它将被复制到我们的选择标签中。
使用replace: true 可能不是一个好主意。见Why is replace property deprecated in AngularJS directives?。

标签： javascript html angularjs

【解决方案1】：

尝试使用$scope.$watch而不是ng-change，这样会更容易管理值：

$scope.$watch('selectdProduct', function (item) {
    alert(item);
});

【讨论】：

问题是我正在为使用 ng-change 和其他指令（例如 ng-click）的遗留系统编写指令。我无法告诉我们的开发人员更改它们。我们只想用我们的自定义指令替换
使用 $scope.$watch 可能更容易，但对应用程序来说会更加繁重。