如何捕获 ng-change 的事件？答案

【问题标题】：How to capture the event of ng-change?如何捕获 ng-change 的事件？
【发布时间】：2017-10-01 06:10:05
【问题描述】：

这是我的代码，但 $event 未定义。有谁知道我怎样才能捕捉到这个事件？

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

<script type="text/javascript">

    var app = angular.module("myApp", []);
    app.controller("myCtrl", function($scope) {
        $scope.alert = function ($event){
            alert($event);
        }
    });
</script>

<body ng-app="myApp" ng-controller="myCtrl">
<div ng-init="names=['A', 'B', 'C']">
    <select class="form-control input-sm" ng-model="fda" ng-change="alert($event)" ng-options="value for value in names">
    </select>
</div>
</body>

</html>

【问题讨论】：

标签： angularjs dom-events

【解决方案1】：

ngMouse，ng-change 不提供事件对象。

但我的建议是创建另一个变量，将$event 分配给它，然后通过ng-change 传递它。

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

<script type="text/javascript">
    var app = angular.module("myApp", []);
    app.controller("myCtrl", function($scope) {
        $scope.alert = function ($event){
            alert($event);
        }
    });
</script>

<body ng-app="myApp" ng-controller="myCtrl">
<div ng-init="names=['A', 'B', 'C']">
    <select 
        class="form-control input-sm" 
        ng-click="event = $event" 
        ng-model="fda" 
        ng-change="alert(event)" 
        ng-options="value for value in names">
    </select>
</div>
</body>

</html>

More details

【讨论】：

【解决方案2】：

ng-change 不是处理 change 事件的指令（我意识到这个名称令人困惑）。所以这是意料之中的。 Github source

如果需要获取事件，可以使用 ng-click 代替：

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

<script type="text/javascript">

    var app = angular.module("myApp", []);
    app.controller("myCtrl", function($scope) {
        $scope.alert = function ($event){
            alert($event);
        }
    });
</script>

<body ng-app="myApp" ng-controller="myCtrl">
<div ng-init="names=['A', 'B', 'C']">
    <select class="form-control input-sm" ng-model="fda" ng-click="alert($event)" ng-options="value for value in names">
    </select>
</div>
</body>

</html>

【讨论】：

【解决方案3】：

预先捕获事件

如果您需要 ng-change 功能但又想获得被更改的元素，您还可以使用 ng-focus 在更改之前捕获元素。

<select ... ng-focus="setFocus($event)" ng-change="alert()" ... />

下面的扩展示例：

<!DOCTYPE html>
<html>
	<head>
			
		<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

		<script type="text/javascript">

			var app = angular.module("myApp", []);
			app.controller("myCtrl", function($scope) {

			    $scope.alert = function($event) {
			        if ($scope.currentElement) {
			            alert($scope.currentElement.value);
			        }
			    }

			    $scope.setFocus = function(event) {
			        $scope.currentElement = event.target;
			    }
			    $scope.cancelFocus = function(event) {
			        $scope.currentElement = false;
			    }
			});
		
		</script>
	</head>

	<body ng-app="myApp" ng-controller="myCtrl">
	    <div ng-init="names=['A', 'B', 'C']">
	        <select class="form-control input-sm" ng-model="fda" ng-change="alert()" ng-focus="setFocus($event)" ng-blur="cancelFocus($event)" ng-options="value for value in names">
	        </select>
	    </div>
	</body>

</html>

【讨论】：

【解决方案4】：

您可以使用此示例：

<!DOCTYPE html>

<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

<script type="text/javascript">

    var app = angular.module("myApp", []);
    app.controller("myCtrl", function($scope) {
        $scope.alert = function ($event){
            let elmSelect = angular.element(e.target)[0];
            let options = elmSelect.options;
            let selectedOptionInnerHmtl = options[options.selectedIndex].innerHTML;
            // and so on ...
        }
    });
</script>

<body ng-app="myApp" ng-controller="myCtrl">
<div ng-init="names=['A', 'B', 'C']">
    <select class="form-control input-sm" ng-model="fda" ng-click="e=$event"ng-change="alert(e)" ng-options="value for value in names">
    </select>
</div>
</body>

</html>

【讨论】：

【解决方案5】：

你不能，this answer 来自谷歌快速搜索结果：

ng-change is not a directive for handling the change event
(I realize that this is confusing given the name), but is actually
instead notified when ngModelController.$setViewValue() is called
and the value changes (because ng-change adds a listener to the 
$viewChangeListeners collection). So this is as expected.

【讨论】：