AngularJS 범위 시계가 실행되지 않음

Question

내 범위에 날짜 필터링 문자열이 있습니다.

$scope.myModel = {date:""}; 

나는 또한의 jQuery 날짜 선택기

지시어 내에서이 문자열을 업데이트

<input date-value="myModel.date" date-picker />

.directive('datePicker', function ($timeout) { 
    return { 
    scope: { 
     dateValue: "=?", 
    }, 
    link : function (scope, elem, attrs) { 
     $timeout(function() { 
     elem.data('date-value', scope.dateValue); 
     elem.bind('change paste', function (blurEvent) { 
      if (elem.data('date-value') != elem.val()) { 
      console.log('value changed, old value is:' + elem.data('date-value') +'new value is: ' + elem.val()); 
      elem.data('date-value', elem.val()); 
      scope.dateValue = elem.val(); 
      } 
     }); 
     }); 
    }, 

    }; 
}); 

루트 범위 날짜가 제대로 업데이트지고 (AngularJS - Attribute directive input value change 사용)을 가지고 있고 성공적으로 그것을 서버에 보낼 수는 있지만, 날짜가 바뀌면 무언가를하고 싶습니다. 내 함수는 페이지 초기화시 한 번 호출되고 다시는 수행되지 않습니다.

$scope.$watch("myModel.date", function(newVal, oldVal) { 
    console.log("newVal: " + newVal + ' oldVal:' + oldVal); 
    if (newVal == oldVal) { 
    return; 
    } 
    // do something 
}); 

여기서 내가 뭘 잘못하고 있니?

Answer 1

다른 스택 오버플로 게시물을 읽으면 scope.apply()를 통해 스코프를 강제 검사 할 수 있지만 내 다이제스트의 스코프는 내 컨트롤러와 동일한 스코프가 아닙니다. 그래서이 방법은 효과가 있습니다. 그러나 이유를 설명하기 위해 각도와 소화력에 대해 충분히 알지 못합니다.

elem.bind('change paste', function (blurEvent) { 
      if (elem.data('date-value') != elem.val()) { 
      console.log('value changed, old value is:' + elem.data('date-value') +'new value is: ' + elem.val()); 
      elem.data('date-value', elem.val()); 
      scope.dateValue = elem.val(); 
      if (!scope.$$phase) {scope.$apply();} 
      } 
     }); 

어쨌든 이것은 너무 복잡하게 보였고 선택을 완료하기 전에 내가 상자를 클릭했을 때 요소 바인딩이 시작되었습니다. 필자는 jQuery datePicker 매개 변수에서 onClose 함수 호출을 설정하는 것으로 끝 맺었습니다.

datePickerParams = { 
    controlType  : "select", 
    timeFormat  : "hh:mm TT", 
    onClose   : function(dateText, inst) { 
          $scope.myModel.dateText = dateText; 
          // do stuff 
         } 
}; 

그런 다음 지시어로 전달하십시오.

.directive('datePicker', function ($timeout) { 
    return { 
    scope: { 
     datetimePickerParams: "=", 
    }, 
    link : function (scope, elem, attrs) { 
     $timeout(function() { 
     elem.datetimepicker(scope.datetimePickerParams) 
     }); 
    }, 
    }; 
}); 

Answer 2

당신이 세 번째 인수로 사실과 $ 시계를 호출 봤어 (어쩌면 각 날짜 선택기를 확인하고 JQuery와 사람에서 멀리 이동하는 시간.이다)?

$scope.$watch("myModel.date", function(newVal, oldVal) { 
    console.log("newVal: " + newVal + ' oldVal:' + oldVal); 
    if (newVal == oldVal) { 
    return; 
    } 
    // do something 
}, true); 

이렇게하면 참조 평등이 아니라 평등 값을 확인합니다.

여기서 제 3의 매개 변수 [objectEquality]의 역할을 이해하려면 documentation for $watch을 확인하십시오. 기본적으로이 값을 true로 설정하면 => "참조 평등을 비교하는 대신 angular.equals를 사용하여 객체 평등을 비교합니다."

또한 개체가 아닌 부울 플래그를 보는 것이 좋습니다. `myModel.date '의 변경시 부울 플래그를 토글하고 대신 그 플래그를 관찰하십시오. 그러면 성능 오버 헤드가 줄어 듭니다. 객체 검사는 부울 플래그를 검사하는 것보다 비용이 많이 듭니다.

희망이 도움이됩니다.