html - Angular.js：用户未选中复选框，但我需要 ng-change

Question

我有一个自定义的 jquery 插件，它将隐藏真正的复选框并显示增强的组件而不是真实的组件。

对于此代码

<label for="local">
  <input type="checkbox" ng-model="value" ng-change="filterByCoursePlace('test')"  name="local"  id="local"><span>Local</span>
</label>

插件生成此代码（它在复选框顶部添加一个 div ）

<label for="local">
  <div class="jcf-class-ng-pristine jcf-class-ng-valid chk-area chk-unchecked chk-focus"><span></span></div>
  <input type="checkbox" ng-model="value" ng-click="filterByCoursePlace('test')" name="local" id="local" class="ng-pristine ng-valid"><span>Local </span>
</label>

大方块是假的（显示给用户），小方块是真实的。真正的复选框将对用户隐藏。

问题是：当我点击真正的 ng-change 时，当我点击假的 ng-change 时，虽然真实的也被检查过，但它不起作用。

Answer 1

你能改变多少 jQuery 插件？生成的代码有一个ng-click="filterByCoursePlace('test')，这就是为什么如果你点击真正的工作。做你想做的最快的方法是删除控制器中的每个ng-change/ng-click添加watch：

$scope.$watch('value', function(newVal, oldVal) {
    filterByCoursePlace('test')
});

或者，如果您可以更改插件生成代码的方式，您可以将其添加ng-click到假复选框而不是真实复选框。无论如何，如果您还想触发filterByCoursePlace另一个value功能（例如“resetFilters”按钮）更改的时间，我会顺其自然$scope.$watch。

Answer 2

我最终在假的上面显示了真正的复选框，并用 css 使其不可见（不透明度 = 0）

这不是完美的解决方案，但它确实有效。