AngularJS中ngModel指令的范围是什么

What is the scope of ngModel directive in AngularJS?

本文关键字:范围 范围是 是什么 指令 ngModel AngularJS      更新时间:2023-09-26

我认为ngModel指令不应该创建新的作用域,因为它需要更改父作用域的变量
如果我错了,请纠正我
此外,还查看ngModel指令的源作用域未定义,因此不应为指令创建新的作用域

var ngModelDirective = ['$rootScope', function($rootScope) {
  return {
    restrict: 'A',
    require: ['ngModel', '^?form', '^?ngModelOptions'],
    controller: NgModelController,
    // Prelink needs to run before any input directive
    // so that we can set the NgModelOptions in NgModelController
    // before anyone else uses it.
    priority: 1,
    compile: function ngModelCompile(element) {
      // Setup initial state of the control
      element.addClass(PRISTINE_CLASS).addClass(UNTOUCHED_CLASS).addClass(VALID_CLASS);
      return {
        pre: function ngModelPreLink(scope, element, attr, ctrls) {
          var modelCtrl = ctrls[0],
              formCtrl = ctrls[1] || modelCtrl.$$parentForm;
          modelCtrl.$$setOptions(ctrls[2] && ctrls[2].$options);
          // notify others, especially parent forms
          formCtrl.$addControl(modelCtrl);
          attr.$observe('name', function(newValue) {
            if (modelCtrl.$name !== newValue) {
              modelCtrl.$$parentForm.$$renameControl(modelCtrl, newValue);
            }
          });
          scope.$on('$destroy', function() {
            modelCtrl.$$parentForm.$removeControl(modelCtrl);
          });
        },
        post: function ngModelPostLink(scope, element, attr, ctrls) {
          var modelCtrl = ctrls[0];
          if (modelCtrl.$options && modelCtrl.$options.updateOn) {
            element.on(modelCtrl.$options.updateOn, function(ev) {
              modelCtrl.$$debounceViewValueCommit(ev && ev.type);
            });
          }
          element.on('blur', function() {
            if (modelCtrl.$touched) return;
            if ($rootScope.$$phase) {
              scope.$evalAsync(modelCtrl.$setTouched);
            } else {
              scope.$apply(modelCtrl.$setTouched);
            }
          });
        }
      };
    }
  };
}];


我也不明白为什么ngModel指令需要ngModel本身
需要:['ngModel','^?form','^'?ngModelOptions']难道不能忽略它并像
那样编写吗需要:['^?form','^?ngModelOptions']
如果没有,请解释原因?

ngModel不会创建一个独立的作用域。ngModel被列在require数组中的原因是,它的控制器(NgModelController)将被注入到链接函数中。请注意传递到ngModelPostLink函数中的ctrls参数。由于ngModel列在数组中,ctrls[0]将是NgModelController的一个实例。ctrls[1]是表单控制器等。