컨트롤러 $ 범위를 업데이트하기 위해 바운드 지시문을 클릭 한 후 Angular의 $ apply가 필요합니까? 아래 Plunker 여기

Question

니핏 : http://plnkr.co/edit/WA6tIfqXV6dO4pbsqxu9?p=preview

I 종종 지향성 요소 결합을 소성시 지향성 범위에서 제어 범위를 업데이트 대향 해요 도전 예컨대 '딸깍 하는 소리'. 지시문의 범위를 변경 한 후 $ apply()를 호출하여 작동하도록하고 있는데 과도 함이 있습니까?

은 그래서 적절 "값"라는 이름의 컨트롤러 값이 있다고 가정 :

.controller('coolCtrl', [ '$scope', function($scope) 
    { 
    $scope.value = 1; 
    }]) 

을 그리고 난 지시어 요소를 클릭시 지침 내에서 그 값을 늘리려면 : 호출

.directive('testScope', function() 
    { 
    return { 
     restrict: 'E', 
     replace: true, 
     scope: { 
     value: '=' 
     }, 
     template: '<button>Increase value</button>', 
     link: function(scope, element, attrs) 
     { 
     // Note: just using standard jqLite here 
     element.on('click', function() 
     { 
      scope.value++; 
      scope.$apply(); 
     }); 
     } 
    }; 
    }) 

을 클릭 할 때마다 상위 범위를 업데이트하는 데 필요한 $? 사용자가 타이핑 중이었다면 하위 범위 전체가 각 keydown의 $ digest주기를 거쳐야합니까?

PS 내 앵귤러 익숙 함은 겸손합니다.

Answer 1

네이티브 브라우저 이벤트를 사용하는 경우 $apply을 사용해야 변경 사항을 볼 수 있습니다. 그리고 네, keydown을 사용하는 경우 완전한 다이제스트주기가 발생합니다. 그러나 대부분의 경우 이것은 문제가되지 않습니다.

ng- * 지시문에서 빌드를 사용하는 경우 실제로 코드를 줄일 수 있습니다. 예를 들어, 당신은 당신의 문제에 대한 ng-click을 사용할 수 있습니다 :

.directive('testScope', function() 
    { 
    return { 
     restrict: 'E', 
     replace: true, 
     scope: { 
     value: '=' 
     }, 
     controller: function($scope){ 
      $scope.increase = function(){ 
      $scope.value++; 
      } 
     }, 
     template: '<button ng-click="increase()">Increase value</button>' 
    }; 
    }) 

이 길을 갈 경우, 수동으로 $apply를 호출 할 필요가 없다. 이것은 각도 방식입니다 ...