AngularJS示波器手錶不觸發

Question

我在我的範圍內有一個日期過濾字符串。

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

我也有一個jQuery的日期選擇器

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

一個更新指令，這裏面的字符串（使用AngularJS - Attribute directive input value change）

.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(); 
      } 
     }); 
     }); 
    }, 

    }; 
}); 

根範圍日期得到正確更新和我可以成功發送給服務器，但我想在日期發生變化時執行某些操作。我的函數在頁面的初始化時被調用一次，然後再也不會再執行。

$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 params上的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) 
     }); 
    }, 
    }; 
}); 

（也許是時候檢查出角日期選取器和jQuery的那些搬走。）

Answer 2

您是否嘗試過調用$腕錶真正的第三個參數？

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

這將檢查值相等而不是引用相等。

查看documentation for $watch這裏瞭解第三個參數[objectEquality]的作用。基本上將其設置爲true會導致=>「使用angular.equals比較對象的相等性，而不是比較參考的相等性。」

此外，它可能會更好地觀看布爾標誌而不是對象。改變你的`myModel.date'來切換布爾標誌，然後觀察那個標誌。這會降低性能開銷 - 檢查對象比檢查布爾標誌要昂貴。

希望這會有所幫助！