$ scope 속성이 업데이트 되더라도 AngularJS 바인딩이 작동하지 않는 이유는 무엇입니까?

저는 AngularJS에 처음 왔으며 구속력을 없애려고 애를 쓰고 있습니다. 아래의 간단한 예제에서는 UI를 업데이트하여 jquery 슬라이더의 값을 표시하려고합니다 (이 문제를 해결할 수있는 순수한 각도 방법이 있음을 알고 있지만이 방법은 저의 감축 테스트 사례이며 매우 유용 할 것입니다). $scope.slider_value을 변경해도보기가 업데이트되지 않는 이유를 이해하는 데 도움이 됨). 내가 뭘 놓치고 있니?

<!DOCTYPE html> 
<html> 
    <head> 
     <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
     <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/flick/jquery-ui.css" />   
     <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script> 
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
     <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script> 
     <script type="text/javascript"> 

      var testApp = angular.module('testApp', []); 
      testApp.controller('testCtrl', function($scope) { 
       $('#slider').slider({ 
        max: 1000, 
        slide: function(event, ui) { 
         $scope.slider_value = ui.value; 
        } 
       }); 
       $scope.slider_value = 0; 
      }); 

     </script> 
     <style> 
      #slider { margin: 20px; } 
      #to_update { margin: 10px; font-family: Arial; } 
     </style> 
    </head> 
    <body ng-app="testApp"> 
     <div ng-controller="testCtrl"> 
      <div id="slider"></div> 
      <div id="to_update">slider value: {{ slider_value }}</div> 
     </div> 
    </body> 
</html>

출처

2014-03-31 rpacker

각도가 알 수없는 이벤트를 통해 범위를 업데이트하고 있습니다. 이 경우 $apply에 업데이트를 래핑해야합니다.

이 시도 : scope.$apply

출처

2014-03-31 03:38:21

에

slide: function(event, ui) { $scope.$apply(function() { $scope.slider_value = ui.value; }); }

체크 아웃 문서는이 질문에 대한 실행 가능한 해결책이지만, 배울 수있는 욕망도 표현 된 이후 ... 논리는 DOM에 액세스 할 수 컨트롤러를 통하지 않고 지시어를 통해 처리되어야합니다. 이렇게하면 컨트롤러가 더 모듈화되고 테스트 할 수 있습니다 (지시문과 동일). jQuery 로직/구현을 캡슐화 할 수있는 슬라이더라는 지시어를 만드는 것을 고려해보십시오. – Brocco

@Brocco, 동의 함 -이를 궁극적으로 지침으로 포장해야합니다. 지도 해줘서 고마워. – rpacker

@NG., 고마워요. 이것이 제가 놓친 것입니다. – rpacker

$ scope 속성이 업데이트 되더라도 AngularJS 바인딩이 작동하지 않는 이유는 무엇입니까?

답변

관련 문제