angular.js -angularjsscope.$watch는 입력 변경 값을 가져올 수 없습니다.

Question

Angularjs와 my97datepicker를 사용하여 무언가를 만들고 싶습니다. 시간을 클릭하여 범위에 값을 동기화하는 지시문을 작성했습니다. 설명이 약간 혼란스럽습니다. 메인 코드를 살펴보세요:

으아악

온라인 주소: http://jsfiddle.sinaapp.com/4zz6nvadg/embedded。初学angularjs，每次写directive都是卡在$watch这里。

Answer 1

당신이 사용한 플러그인을 사용해 본 적이 없고, 지금은 공부할 시간도 없기 때문에 어떻게 해결해야 할지 모르겠습니다. 하지만 문제가 어디에 있는지 알려드릴 수 있고, 해결책을 직접 찾아보실 수도 있습니다. 먼저 스크린샷을 살펴보세요:

1. 플러그인이 올바르게 실행되는지 확인하려면 먼저 $watch 관련 코드를 주석 처리하세요.
$watch 相关的代码，以确保插件正确执行
2. 注意下面：2014-10-14 出现在 DOM 的哪里了吗？
3. 在 $watch 部分你监视的是 attr.value，然而根据截图可以发现插件设定的日期根本就不是保存在 input[value] 这里，无论如何 input[value] 都是空值
4. 因此，$watch 所做的仅仅是读取一个不存在的值，并且覆盖了 model，这就是为什么加上 $watch 部分之后，连 model 都失效的缘故。

知道原因之后，解决办法就简单了，要么让插件把你想要的值写到 input[value] 去，要么反过来，找到正确的地方去取值去 $watch，具体办法自己去查询插件的文档或源码吧。

---

吃了晚饭，帮你看一下插件的源代码，实际上人家提供了几个事件回调函数，而且你不必非用 $watch 的，代码如下：

var datepicker=angular.module("datepicker",[]);
datepicker.controller("datepickerCtrl",function($scope){
  $scope.date="2014-10-14";
});
datepicker.directive("datePicker",function(){
  return {
    restrict:"A",
    link:function(scope, element, attr){
      element.bind("click", function () {
        window.WdatePicker({
          onpicked: function () {
            scope.$apply(scope.date = this.value);
          }
        });
      });
    }
  };
});

Demo: http://jsfiddle.sinaapp.com/4zz6n9usy

想用 $watch 也可以，这样写：

var datepicker=angular.module("datepicker",[]);
datepicker.controller("datepickerCtrl",function($scope){
  $scope.date="2014-10-14";
});
datepicker.directive("datePicker",function(){
  return {
    restrict:"A",
    link:function(scope, element, attr){
      element.bind("click", function () {
        window.WdatePicker({
          onpicked: function () { scope.$digest(); }
        });
      });
      scope.$watch(
        function () { return element[0].value },
        function (newValue) { scope.date = newValue; }
      );
    }
  };
});

Demo: http://jsfiddle.sinaapp.com/4zz6n9t9q

注意，这里第一个参数不能是直接 element[0].value，因为这个值是一个 primitive string，而不是 angular 封装过的对象，所以要用一个 getter 函数显式的去获取，否则你拿不到的。

而且这里还必须得依赖插件的回调函数做一下 scope.$digest()，否则 scope.date다음 사항에 주의하세요. 2014-10-14는 DOM에서 어디에 표시되나요?