如何捕获ng-change的事件？

Here's my code, But the $event is undefined. Does anyone know how can I capture the event?

这是我的代码,但$ 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>

4 个解决方案

#1

ng-change is not a directive for handling the change event (I realize that this is confusing given the name). So this is as expected. Github source

ng-change不是处理更改事件的指令(我意识到这个名称令人困惑)。所以这是预期的。 Github来源

If you need to get the event, you can use ng-click instead:

如果您需要参加活动,可以使用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>

#2

ngMouse, ng-change does not provide an event object. But you can create another variable and assign $event to that. then pass it via ng-change. It's my suggestion

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

#3

You can't, this answer is taken from a quick google search result:

你不能,这个答案取自快速谷歌搜索结果:

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.

#4

Capture event beforehand

事先捕获事件

If you need the ng-change functionality but also want to get the element being changed you could also use ng-focus to capture the element before change.

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

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

Expanded example below:

扩展示例如下:

<!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>

#1