AngularJS范围。$ on设置范围未反映在UI中

Question

以下代码按预期工作，并且scope.checked值通常在UI中反映

.directive('comparisonSlider',
    function () {
        return{
            restrict: 'E',
            templateUrl: '/app/reports/comparison-slider.html',
            controller: function ($scope, $rootScope) {
                $scope.checked = false;
                $rootScope.$on('compare',
                        function () {
                            $scope.checked = true;
                        },
                        true);
            }
        }
    }
)

但以下代码也有效，但范围的更改未反映在UI中。

.directive('comparisonSlider',
    function () {
        return{
            restrict: 'E',
            templateUrl: '/app/reports/comparison-slider.html',
            controller: function ($scope, $rootScope) {
                $scope.checked = false;
                $rootScope.$on('compare',
                        function () {
                            $scope.checked = !$scope.checked;
                        },
                        true);
            }
        }
    }
)

有什么想法吗？

Answer 1

这按预期工作，不确定为什么另一个不

.directive('comparisonSlider',
    function () {
        return{
            restrict: 'E',
            templateUrl: '/app/reports/comparison-slider.html',
            controllerAs: 'sliderCtrl',
            controller: function ($scope, $rootScope) {
                var self = this;
                self.checked = false;
                $rootScope.$on('compare',
                        function () {
                            self.checked = !self.checked;
                        },
                        true);
            }
        }
    }
)

Answer 2

尝试更改：

self.checked = !self.checked;  

为：

self.checked = false;