AngularJS中ngModel指令的范围是什么?

时间:2016-07-29 16:01:42

标签: javascript angularjs

我认为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']
如果没有那么请解释原因?

1 个答案:

答案 0 :(得分:1)

ngModel不会创建隔离范围。 ngModel列在require数组中的原因是它的控制器(NgModelController)将被注入到链接函数中。注意传递给ngModelPostLink函数的ctrls参数。因为ngModel列在数组中,所以ctrls [0]将是NgModelController的一个实例。 ctrls [1]是表单控制器等。