angularjs – 使用ngModel和普通的ngController而不是指令？

2) I have been trying to figure out where ngModelControllers are stored so that I could look at the situation in the debugger but have not been able to find them. When using an ngModel directive should I see these in the scope or parent scope? (Where do they live?!?)

答案取决于您要从哪里访问控制器.

使用ng-model从元素外部

它在具有ng-model属性的元素和父表单(或ngForm)上都需要“name”属性.所以假设你有一个名为myForm的表单和一个名为myInput的ng-model属性的元素,那么你可以从父作用域访问myFoo的ngModelController作为myForm.myInput.例如,出于调试目的：

<p>myFoo: {{myForm.myInput.$modelValue}}<p>
<form name="myForm">
  <div ng-controller="InnerController" name="myInput" ng-model="model.foo"></div>
</form>

从http://plnkr.co/edit/IVTtvIXlBWXGytOEHYbn?p=preview可以看出

从具有ng-model的元素内部

与answer from @pixelbits类似,由于控制器创建的顺序,需要使用$evalAsync,但您也可以使用angular.element.controller函数来检索它：

app.controller('InnerController',function($scope,$element) {
  $scope.$evalAsync(function() {
    $scope.myModelController = $element.controller('ngModel');
  });
});

在控制器内部使用,以进行调试,如下所示：

<div ng-controller="InnerController" ng-model="model.foo">
  <p>myFoo: {{myModelController.$modelValue}}<p>
</div>

从http://plnkr.co/edit/C7ykMHmd8Be1N1Gl1Auc?p=preview可以看出.

1) Is there some way to use ngModel along with a plain controller to get the effect above?

一旦在指令中有了ngModelController,就可以像使用$setViewValue函数使用访问ngModelController的自定义指令一样更改其值：

myModelController.$setViewValue('my-new-model-value');

例如,您可以执行此操作以响应触发ngChange处理程序的用户操作.

app.controller('InnerController',$element) {
  $scope.$evalAsync(function() {
    $scope.myModelController = $element.controller('ngModel');
  });

  $scope.$watch('myModelController.$modelValue',function(externalModel) {
    $scope.localModel = externalModel;
  });

  $scope.changed = function() {
    $scope.myModelController.$setViewValue($scope.localModel);
  };
});

请注意$modelValue上的额外观察者以获取模型的初始值,以及对任何后续更改做出反应.

它可以与模板一起使用,如：

{{model.foo}}
<div ng-controller="InnerController" ng-model="model.foo">
  <p><input type="text" ng-model="localModel" ng-change="changed()"></p>
</div>

请注意,这使用ngChange而不是localModel上的观察程序.这是故意的,因此只有当用户与元素交互时才调用$setViewValue,而不是响应来自父作用域的模型更改.

这可以在http://plnkr.co/edit/uknixs6RhXtrqK4ZWLuC?p=preview看到

编辑：如果您想避免使用$evalAsync,可以使用观察者.

$scope.$watch(function() {
  return $element.controller('ngModel');
},function(ngModelController) {
  $scope.myModelController = ngModelController;
});

见于http://plnkr.co/edit/gJonpzLoVsgc8zB6tsZ1?p=preview

作为旁注,到目前为止,我似乎已经避免了像这样的嵌套普通控制器.我认为如果模板角色的某个部分是通过ngModel来控制变量,那么它是编写小指令的主要候选者,通常使用隔离范围来确保由于范围继承而没有意外的影响,这有明确的API,并使用require来访问ngModelController.是的,它可能不会被重用,但它确实有助于在代码的各个部分之间强制分离责任.