AngularJS范围.$on设置范围没有反映在UI中

Question

下面的代码按预期和范围工作。被检查的值通常反映在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;