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

Question

我有一些这样的 HTML:

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

和这样的 Controller :

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/

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>

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