AngularJSスコープ。$ UI

Question

に次のコードを反映していない範囲を設定するには、期待通りに動作し、scope.checked値は通常

.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に反映されなく次のコードも動作しますが、変更されていますスコープは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;