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

Question

在我的应用程序中，我想保留对某些代码部分使用普通 Controller 的选项 - 而不是为永远不会重复使用的一次性事物创建指令。

在这些情况下，我经常想从 Controller 发布一些数据以在包含的部分中使用。现在，我知道我可以简单地绑定(bind) Controller 范围内的项目，但是我想明确指定“模型”位置，只是为了使代码更易于维护且更易于阅读。我想使用的是 ng-model，因为它将用于自定义指令，但就在我的普通 Controller 旁边:

<div ng-controller="AppController" ng-model='fooModel'>
  {{fooModel}}
</div>

但是，我认为如果不使用指令和“require”注入(inject)，就无法获取对生成的 ngModelController 的引用。

我知道我可以通过将 $attr 注入(inject)我的 Controller 并执行类似以下操作来相当轻松地创建自己的属性:

<div ng-controller="AppController" my-model='fooModel'>
  {{fooModel}}
</div>

在这种情况下，我只需手动获取或解析 myModel 值并将我的模型粘贴到该名称下的 $scope 中。然而，在这种情况下感觉不对 - 我真的只需要一个 Controller 的“模型”，并且我不希望在 ngModel 存在时将此样板添加到每个 Controller 中。 (这就是事情的原理!)

我的问题是:

1) 有没有办法将 ngModel 与 plain Controller 一起使用来获得上面的效果？

2)我一直试图找出 ngModelController 的存储位置，以便我可以查看调试器中的情况，但一直无法找到它们。使用 ngModel 指令时，我应该在作用域还是父作用域中看到这些指令吗？ (他们住在哪里？!？)

更新:正如下面的答案中所建议的， $element.controller() 可用于获取 Controller 。这可行( http://plnkr.co/edit/bZzdLpacmAyKy239tNAO?p=preview )但是有点不令人满意，因为它需要使用 $evalAsync。

Answer 1

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?!?)

答案稍微取决于您想要从哪里访问 Controller 。

从元素外部使用ng-model

它需要带有 ng-model 的元素上的“name”属性属性和父表单(或 ngForm )。假设您的表单名称为 myForm以及带有 ng-model 的元素名称为 myInput 的属性，然后您可以访问ngModelController对于 myFoo来自父范围 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由于 Controller 创建的顺序，需要它，但您也可以使用 angular.element.controller 函数来检索它:

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

用于在 Controller 内部查看它，用于调试目的，如下:

<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在指令内部，您可以更改其值，就像使用自定义指令访问 ngModelController 一样。 ，使用$setViewValue功能:

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

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

app.controller('InnerController', function($scope, $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 上的额外观察者获取模型的初始值，并对以后的任何更改使用react。

它可以与如下模板一起使用:

{{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所示

<小时/>

顺便说一句，到目前为止，我似乎已经避免了像这样嵌套普通 Controller 。我想如果模板的某个部分的作用就是通过ngModel来控制一个变量，它是编写小指令的主要候选者，通常具有隔离的作用域，以确保不会因作用域继承而产生意外影响，具有清晰的 API，并使用 require访问ngModelController 。是的，它可能不会被重用，但它确实有助于强制代码各部分之间的职责分离。