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函数会再次按预期执行。

Answer 1

我刚刚用你的代码创建了一个jsfiddle，它适用于我。

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

Answer 2

点击标签也会触发ng-change，你可以点击复选框/收音机的标签来检查/取消选中它应该触发范围功能。

Answer 3

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

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>

ng-change未从标签内的复选框中触发

4 个答案: