Angular 1.5中切换UI时$watch未触发的问题排查

你遇到的问题是因为**$watch的第一个参数使用方式错误**，导致Angular无法检测到self.isAdOps的变化。

为什么原代码的$watch不生效？ #

在Angular中，$scope.$watch的第一个参数需要是以下两种类型之一：

1. 一个返回要监听值的函数，Angular会在每次脏检查时执行这个函数，对比前后返回值的变化
2. 一个字符串表达式（比如"$ctrl.isAdOps"），Angular会解析这个表达式获取最新值

而你直接传入了self.isAdOps——这是一个具体的布尔值（初始值），Angular会把它当成静态值监听。当你点击复选框修改self.isAdOps时，$watch并不会主动去重新读取这个变量的最新值，自然不会触发回调函数。

修复方案1：使用函数作为$watch的监听目标 #

把$watch的第一个参数改成返回self.isAdOps的函数，这样每次脏检查都会获取最新值：

$scope.$watch(function() {
    return self.isAdOps;
}, function (isAdOps) {
    $scope.$broadcast('isAdOpsToggled', isAdOps);
});

修复方案2：使用组件的$onChanges生命周期钩子（更推荐） #

Angular 1.5+的组件提供了$onChanges钩子，专门用来监听绑定属性的变化，这比依赖$scope的$watch更符合组件化的设计思想，也更清晰：

controller: ['$scope', '$state', function ($scope, $state) {
    var self = this;

    // 监听绑定属性的变化
    this.$onChanges = function(changes) {
        // 只有当isAdOps发生变化时才执行逻辑
        if (changes.isAdOps) {
            $scope.$broadcast('isAdOpsToggled', changes.isAdOps.currentValue);
        }
    };
}]

这个钩子会在组件绑定的属性（比如这里的isAdOps）发生变化时被调用，changes对象里包含了变化的前后值，你可以通过changes.isAdOps.currentValue拿到最新的值。

内容的提问来源于stack exchange，提问作者Elad Benda2