Question

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

<select></select>

我有一个编译函数，它将ng-options指令添加到我们的选择中。由于from上呈现的元素是一个选择，因此我希望在元素上放置ng-change指令将调用相关的change函数，但只能调用一次。这里是我共享代码的代码段。

这也是相同代码的简化版本：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被放置在我们的select中，并且我们无法在指令中为我们的select定义ng-model，因此我们可以调用父对象的ng-change。 / em>

Answer 1

尝试使用$scope.$watch代替ng-change，将更易于管理值：

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

为什么ng-change无法在angularjs中的自定义指令上运行

1 个答案: