AngularJS : 양방향 바인딩 내부 지시문

Question

저는 비교적 Angularjs에 익숙하며 저는 응용 프로그램을 작성하고 있습니다. 응용 프로그램에는 객체 배열이 있으며 각 객체에는 status라는 개인 변수가 있습니다. 나는 그들의 상태에 따라 이러한 객체의 하위 집합을 반환하는 두 개의 필터를 가지고 있습니다. 예를 들어,이 두 필터에 해당하는 상태는 각각 'NEW'및 'OLD'입니다.

다음으로이 객체로 구성된 div를 드래그 할 수있게하는 지시문을 작성했습니다. 기본적으로 지시문은 양방향 데이터 바인딩을 통해 객체를 수신 한 다음 해당 메소드를 호출하여 객체의 상태를 변경합니다.

문제는 개체의 상태가 변경되어 필터가 즉시 업데이트되지 않습니다.입니다. 예를 들어 div 중 세 개의 div를 다른 절반으로 드래그하면 상태가 업데이트되지만 필터는 업데이트되지 않습니다.

.directive('draggable', function ($document) { 
return { 
    scope: { 
     bill: '=' // the bill object 
    }, 
    restrict: 'A', 
    link: function (scope, element, attr) { 
     // do something here 
     console.log('bill', scope.bill); 
     var startX = 0, 
      startY = 0, 
      x = 0, 
      y = 0, 
      sourceX = 0, 
      sourceY = 0, 
      windowWidth = 0; 

     element.on('mousedown', function (event) { 
      event.preventDefault(); 
      startX = event.pageX - x; 
      startY = event.pageY - y; 
      $document.on('mousemove', mousemove); 
      $document.on('mouseup', mouseup); 
      windowWidth = $(window).width(); 
      sourceY = event.pageY; 
      sourceX = event.pageX; 
     }); 

     function mousemove(event) { 
      y = event.pageY; 
      x = event.pageX; 
      element.css({ 
       top: y + 'px', 
       left: x + 'px' 
      }); 
     } 

     function mouseup(event) { 
      $document.unbind('mousemove', mousemove); 
      $document.unbind('mouseup', mouseup); 
      console.log('mouseup', startX, startY, event.screenX, event.screenY); 
      var mid = windowWidth/2; 

      if (sourceX < mid && event.pageX >= mid) { 
       // yes there was a change of sides 
       scope.bill.markCooking(); // change the status to COOKING 
       console.log('moved to COOKING', scope.bill.getStatus()); 
      } else if (sourceX >= mid && event.pageX < mid) { 
       scope.bill.enq(); // change the status to NEW 
       console.log('moved to ENQ', scope.bill.getStatus()); 
      } 
     } 
    } 
}}) 

내가 잘못 여기서 뭐하는 거지 : 여기

는 지시인가?

Answer 1

브라우저 이벤트 핸들러를 사용할 때마다 Angular의 라이프 사이클을 벗어납니다. 사용자의 조치로 인해 이벤트가 트리거되었지만 Angular는 바인딩 (이 경우 청구서 상태)을 확인하고 업데이트해야한다는 것을 모릅니다. scope.$apply()를 호출

수동으로 각도의 변화 탐지를 트리거하고 바인딩 업데이트됩니다

scope.$apply(function() { 
    if (sourceX < mid && event.pageX >= mid) { 
    // yes there was a change of sides 
    scope.bill.markCooking(); // change the status to COOKING 
    console.log('moved to COOKING', scope.bill.getStatus()); 
    } else if (sourceX >= mid && event.pageX < mid) { 
    scope.bill.enq(); // change the status to NEW 
    console.log('moved to ENQ', scope.bill.getStatus()); 
    } 
}); 

당신은 범위 여기에 자신의 라이프 사이클에 대한 자세한 내용을보실 수 있습니다을 : http://docs.angularjs.org/guide/scope