标签内的复选框不触发ng-change事件

Question

我有如下的HTML代码：

<input ng-controller="cboxCtrl" type="checkbox" 
       ng-model="hideCompleted" ng-change="hideChanged()"/>

还需要一个类似这样的控制器：

angular.module('simple-todos').controller('cboxCtrl', ['$scope',  
function ($scope) {
    console.log("starting");

    $scope.hideChanged = function () {
        console.log("in hideChanged() ");
    };
}]); // end controller

当我点击复选框时，它可以很好地工作并在控制台上显示消息。然而，如果我在复选框周围添加一个标签：

<label>
    <input ng-controller="cboxCtrl" type="checkbox" 
           ng-model="hideCompleted" ng-change="hideChanged()"/>
    Some text to explain the checkbox
</label>

当我点击复选框时，ng-change函数不会运行。我认为这与作用域有关，但我无法确定具体原因。如果我将标签替换为div（这样做当然不会得到“漂亮”的布局），ng-change函数就会按预期执行。

- Per Beliing

---

把 ng-controller="cboxCtrl" type="checkbox" ng-model="hideCompleted" ng-change="hideChanged()" 移到标签元素上怎么样？ - Deepsy

好问题，欢迎来到SO！ - thomaux

在我的Chrome浏览器中按预期工作 http://codepen.io/maurycyg/pen/JGbNgJ?editors=101 - maurycy

Answer 1

我刚刚用你的代码创建了一个JSFiddle，它对我有效。

https://jsfiddle.net/jfplataroti/hphb8c4v/5/

angular.module('simple-todos', []).controller('cboxCtrl', ['$scope', cboxCtrl]);


function cboxCtrl($scope) {
  console.log("starting");

  $scope.hideChanged = function() {
    console.log("in hideChanged() ");
  };
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="simple-todos">
  <label>
    <input ng-controller="cboxCtrl" type="checkbox" ng-model="hideCompleted" ng-change="hideChanged()" />some text for the label
  </label>
</div>

你介意分享你的完整代码吗？

- jfplataroti

---

嗨。我刚刚意识到这一定与它作为 Meteor 应用程序运行有关。因为我现在已经尝试过没有其他任何东西，这里它可以正常工作。谢谢你指导我正确的方向。 - Per Beliing

Answer 2

点击标签也会触发ng-change事件，您可以单击复选框/单选按钮的标签来选中/取消选中它，应该触发作用域函数。

- moonberry

Answer 3

请检查您正在尝试运行此代码的浏览器。也请在您安装的其他浏览器上进行检查。AngularJS不再支持IE8或更早版本。 链接在这里：https://docs.angularjs.org/guide/ie

- Mayur Padshala

Answer 4

你需要将 ng-change 事件从复选框移动到周围标签的 ng-click 事件上。

<label ng-click="hideChanged()">
    <input ng-controller="cboxCtrl" type="checkbox" ng-model="hideCompleted" />
    Some text to explain the checkbox
</label>

- Ryan Durkin