angularjs – 1.3.0 rc0之后ngChange的问题

前端之家收集整理的这篇文章主要介绍了angularjs – 1.3.0 rc0之后ngChange的问题前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我一直在使用1.3的beta版本,现在转移到1.3.1后,我注意到一个问题,通过检查所有早期版本,我看到它似乎已经在1.3.0 rc1中启动了.

我有这样的代码

  1. <select ng-model="home.modal.topicId"
  2. ng-change="ctrl.modalTopicChanged()"
  3. ng-options="item.id as item.name for item in home.modal.option.topics.data"
  4. ng-required="true">
  5. <option style="display: none;" value="">Select Topic</option>
  6. </select>

在rc1之前,首次显示表单时未触发ng-change.现在它被一个未定义的home.modal.topicId解雇了.这对我来说是一个突破性的变化,但它没有在突破性变化部分提及,我想知道它是否是一个尚未被注意到的错误.

这是生成的堆栈跟踪:

  1. TypeError: Cannot read property 'dataMap' of undefined
  2. at AdminProblemController.modalTopicChanged (http://127.0.0.1:17315/Content/app/admin/controllers/ProblemController.js:109:114)
  3. at $parseFunctionCall (http://127.0.0.1:17315/Scripts/angular.js:11387:18)
  4. at Scope.$get.Scope.$eval (http://127.0.0.1:17315/Scripts/angular.js:13276:28)
  5. at http://127.0.0.1:17315/Scripts/angular.js:19888:13
  6. at http://127.0.0.1:17315/Scripts/angular.js:19499:9
  7. at forEach (http://127.0.0.1:17315/Scripts/angular.js:331:20)
  8. at $$writeModelToScope (http://127.0.0.1:17315/Scripts/angular.js:19497:5)
  9. at writeToModelIfNeeded (http://127.0.0.1:17315/Scripts/angular.js:19490:14)
  10. at http://127.0.0.1:17315/Scripts/angular.js:19484:9
  11. at validationDone (http://127.0.0.1:17315/Scripts/angular.js:19420:9)

我在这里注意到的是一个新函数:writeToModelIfNeeded

当我查看更改日志差异时,在检查所有更改和行号时,我找不到提及此功能的任何内容.

我想就此提出一些建议.首先是可以找到导致添加writeToModelIfNeeded的更改,其次是选择框的正确功能.我认为整个想法是只有在定义模型值时才会触发ng-change.

这里参考的是新代码的区域,似乎已经添加了1.3.0 rc.1

  1. **
  2. * @ngdoc method
  3. * @name ngModel.NgModelController#$commitViewValue
  4. *
  5. * @description
  6. * Commit a pending update to the `$modelValue`.
  7. *
  8. * Updates may be pending by a debounced event or because the input is waiting for a some future
  9. * event defined in `ng-model-options`. this method is rarely needed as `NgModelController`
  10. * usually handles calling this in response to input events.
  11. */
  12. this.$commitViewValue = function() {
  13. var viewValue = ctrl.$viewValue;
  14.  
  15. $timeout.cancel(pendingDebounce);
  16.  
  17. // If the view value has not changed then we should just exit,except in the case where there is
  18. // a native validator on the element. In this case the validation state may have changed even though
  19. // the viewValue has stayed empty.
  20. if (ctrl.$$lastCommittedViewValue === viewValue && (viewValue !== '' || !ctrl.$$hasNativeValidators)) {
  21. return;
  22. }
  23. ctrl.$$lastCommittedViewValue = viewValue;
  24.  
  25. // change to dirty
  26. if (ctrl.$pristine) {
  27. ctrl.$dirty = true;
  28. ctrl.$pristine = false;
  29. $animate.removeClass($element,PRISTINE_CLASS);
  30. $animate.addClass($element,DIRTY_CLASS);
  31. parentForm.$setDirty();
  32. }
  33. this.$$parseAndValidate();
  34. };
  35.  
  36. this.$$parseAndValidate = function() {
  37. var parserValid = true,viewValue = ctrl.$$lastCommittedViewValue,modelValue = viewValue;
  38. for(var i = 0; i < ctrl.$parsers.length; i++) {
  39. modelValue = ctrl.$parsers[i](modelValue);
  40. if (isUndefined(modelValue)) {
  41. parserValid = false;
  42. break;
  43. }
  44. }
  45. if (isNumber(ctrl.$modelValue) && isNaN(ctrl.$modelValue)) {
  46. // ctrl.$modelValue has not been touched yet...
  47. ctrl.$modelValue = ngModelGet();
  48. }
  49. var prevModelValue = ctrl.$modelValue;
  50. var allowInvalid = ctrl.$options && ctrl.$options.allowInvalid;
  51. if (allowInvalid) {
  52. ctrl.$modelValue = modelValue;
  53. writeToModelIfNeeded();
  54. }
  55. ctrl.$$runValidators(parserValid,modelValue,viewValue,function() {
  56. if (!allowInvalid) {
  57. ctrl.$modelValue = ctrl.$valid ? modelValue : undefined;
  58. writeToModelIfNeeded();
  59. }
  60. });
  61.  
  62. function writeToModelIfNeeded() {
  63. if (ctrl.$modelValue !== prevModelValue) {
  64. ctrl.$$writeModelToScope();
  65. }
  66. }
  67. };
  68.  
  69. this.$$writeModelToScope = function() {
  70. ngModelSet(ctrl.$modelValue);
  71. forEach(ctrl.$viewChangeListeners,function(listener) {
  72. try {
  73. listener();
  74. } catch(e) {
  75. $exceptionHandler(e);
  76. }
  77. });
  78. };
通过这样做,我能够重现你的问题.没有看到你的控制器虽然不确定是否相同:
  1. this.modal = {
  2. topicId:null,option:{
  3. topics:{
  4. data:[{id:1,name:'item1'},{id:2,name:'item2'}]
  5. }
  6. }
  7. };

这里发生的是angular表示null是一个无效值,因此默认情况下将其设置为undefined.您可以通过将其设置为“未定义”或将其添加到您的html来解决此问题:

  1. ng-model-options="{allowInvalid:true}"

还测试了Josep plunker并将该值更改为null也导致ngChange触发

猜你在找的Angularjs相关文章