AngularJS Umfang. $ Umfang auf Einstellung nicht reflektiert in UI

Question

Der folgende Code funktioniert wie erwartet und der scope.checked Wert wird in der Benutzeroberfläche normalerweise

.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); 
      } 
     } 
    } 
) 

aber der folgende Code funktioniert auch reflektiert, aber die Änderungen an Der Bereich wird nicht in der Benutzeroberfläche angezeigt.

.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); 
      } 
     } 
    } 
) 

Irgendwelche Ideen?

Answer 1

Dies funktioniert wie erwartet, nicht sicher, warum die andere nicht

.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

Versuchen verändert sich:

self.checked = !self.checked; 

zu:

self.checked = false;