AngularJS防止ngModel同步

我有一個簡單的指令稱爲po-datepicker，它在屏幕上顯示一個datepicker，但允許用戶鍵入手動日期：AngularJS防止ngModel同步

<input type="text" ng-model="model" po-datepicker required />

，這是指令：

myApp.directive('poDatepicker', function() { 
    return { 
     require: ['?^ngModel'], 
     restrict: 'A', 
     link: function ($scope, elem, attrs, ctrl) { 
      var ngModel = ctrl[0]; 
      var picker = elem.datepicker(); 

      picker.on('changeDate', function(e) { 
       ngModel.$setViewValue(e.date); 
       ... 
      }); 

      elem.parent().find('button').on('click', function() { 
       picker.datepicker('show'); 
      }); 

      var changeFn = function(e) { 
       // Here I have some logic that calls $setViewValue(); 
      }; 

      picker.on('hide', changeFn); 
      elem.on('keyup blur', changeFn); 
     } 
    }; 
});

這可以按預期工作，但是當我嘗試在輸入中鍵入一個值時，它會更新ngModel，更改範圍中的變量，如何防止在輸入中更改ngModel？

Here is a plunkr，嘗試手動編寫一個值，你就會明白我在說什麼。

來源

2014-07-01 Evandro Silva

爲什麼不將文本輸入與不同的模型對象相關聯。然後在適當的時候，您可以將該值提交給實際模型對象。 –

如果我這樣做，諸如'required'這樣的驗證將不起作用，因爲它需要'ngModel'來驗證 –

事實上，一些研究之後，我發現這個問題的解決方案。

我在論壇和發現的問題是什麼，我需要解除綁定元素的事件，就像這樣：

elem.unbind('input').unbind('keydown').unbind('change');

但隨着預期的解決方案沒有奏效。

的問題是，我目前採用了棱角分明的1.2.x，我發現你也需要一些優先級設置爲指令，如：

return { 
    require: ['?^ngModel'], 
    priority: 1, 
    ... 
}

的priority: 1需要在這種情況下，，因爲一些內部Angular.js指令的優先級。

Here is an updated plunker設置了正確的優先級。

來源

2014-07-24 23:14:23

只需添加「已禁用」，以輸入http://plnkr.co/edit/xFeAmSCtKdNSQR1zbAsd?p=preview

<input type="text" class="form-control" ng-model="test" po-datepicker required feedback disabled/>

來源

2014-07-01 20:36:43 sylwester

用戶需要手動設置該值的選項，這就是問題 –

解決方案如何使用http： /plnkr.co/edit/Ax2Rd7ybaISUw0yMcfIj?p=preview – sylwester

AngularJS防止ngModel同步

回答

相關問題