AngularJS와 범위. $ 범위를 설정하는 방법에 대한 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;