Question

我们有＆＃34; myCustomHandler＆＃34; 属性指令：

<input type="text" my-custom-handler ng-model="myModel">

该指令的简化版本如下所示：

.directive('myCustomHandler', function () {
return {
    require: 'ngModel',
    link: function (scope, elem, attrs) {
            scope.change = function(){
            console.log('model changed');            
        }
    }
}});

我需要一种方法来处理指令中的ng-change事件（触发scope.change（）函数）。

我特别要求 ng-change 的原因是我的输入是type = text，我需要处理每个键。此外，在处理更改时，我也需要旧值和新值（所以我更喜欢避免使用jQuery方法）。

我已经考虑过将$ watch用于模型，但它不会这样做，因为我只有在用户更改模型时才需要处理事件。

谢谢！

Answer 1

我希望这可以帮到你

＆＃13;

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.model = { name: 'World' };
  $scope.name = "Felipe";
  $scope.$watch('name',function(o,n){
    console.log(o)
  })
});

app.directive('myDirective', function($compile) {
  return {
    restrict: 'E',
    scope: {
      myDirectiveVar: '=',
     //bindAttr: '='
    },
    template: '<div class="some">' +
      '<input ng-model="myDirectiveVar"></div>',
    replace: true,
    //require: 'ngModel',
    link: function($scope, elem, attr, ctrl) {
      console.debug($scope);
      //var textField = $('input', elem).attr('ng-model', 'myDirectiveVar');
      // $compile(textField)($scope.$parent);
    }
  };
});

＆＃13;

<!doctype html>
<html ng-app="plunker" >
<head>
  <meta charset="utf-8">
  <title>AngularJS Plunker</title>
  <link rel="stylesheet" href="style.css">
  <script>document.write("<base href=\"" + document.location + "\" />");</script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.js"></script>
  <script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
  <my-directive my-directive-var="name"></my-directive>{{name}}
</body>
</html>

＆＃13;

Answer 2

From jquery doc:

对于选择框，复选框和单选按钮，会触发该事件当用户使用鼠标进行选择时，立即进行事件的其他元素类型延迟到元素丢失对焦。

这意味着当你点击输入时会触发onChange事件。

function listener() {
  return {
   link: function(scope, elem, attrs) {
     elem.bind("change", function() {
       alert('change');
     });
   }
  }
}

angular.module('myApp', []);
angular
  .module('myApp')
  .directive('listener', listener);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<div ng-app="myApp">
    <input type="text" listener>
</div>

从属性指令附加和处理ng-change

2 个答案: