javascript - 在 AngularJS 中，我可以/应该从 Controller 增强模型吗？

Question

总的来说，我对 Angular 和 MV* 还很陌生(这与我多年来通过观察其他开发人员使用 Ruby on Rails 所学到的知识相比还不够)，所以请原谅这个可能是个天真的问题。

我正在尝试设置一个预输入字段，用户可以在其中输入街道地址并从 Google 地理编码 API 获取实时建议。我从 UI Bootstrap 中逐字开始(中间字段中的“异步结果”示例):

http://angular-ui.github.io/bootstrap/#/typeahead

它在本地工作，但现在我想扩展它以收集地址的其他相关详细信息并将其与其他表单数据一起提交。例如，如果地理编码 API 返回 country输入 address_components在其结果( example here )中，我想将其添加到我发布到服务器的表单数据中。 (对于我需要捕获的属性/属性还有其他逻辑，但这是一个很好的起点。)

目前，只有 formatted_address Geocoding API 返回的属性随表单一起提交，如 ui.bootstrap.typeahead指令将其绑定(bind)到 typeahead 指令的 <input>使用ng-model .

所以，我的问题是双重的(但请随意单独解决):

1. 如果我从头开始(即不受 UI Bootstrap 中所做的设计/实现决策的约束)，那么实现此目的最“Angular”的方式是什么？该指令是否应该创建 <input>与 ng-model 绑定(bind)对于我可能想要捕获的每个值，然后 Controller 将处理填充可用的值？
2. 由于我不是从头开始，那么增强现有代码以提供此功能的合理方法是什么？有没有办法可以向现有指令添加功能？这种行为是否属于 Controller ，或者我最好将其抽象到服务中？还是我想得太多了——有没有我没有考虑过的更简单或更好的方法？根据 UI Bootstrap 示例，我现在看到的放置此代码的唯一明显位置是传递给 .then() 的 success 函数中。 $scope.getLocation()内，我正在处理 $http回应，但我的直觉告诉我这并不理想。我所能想象的就是向我正在构建的表单值对象(即我将在表单提交上发布的对象)添加属性，但随后我必须知道这些属性的名称，所以现在我的 Controller 是与它的使用形式联系得太紧密。

预先感谢您的帮助。我希望这是有道理的。由于我仍在掌握基本概念，因此如果您可以向我指出任何执行类似操作的现有代码，或者引用可以提供一些见解的特定文档或文章，这将特别有用。

Answer 1

在#1上，Angular-UI 设计是一种非常“Angular”的实现方式 - 我不认为它有任何问题。该指令采用一个列表并返回选定的列表项。这就是 Controller 的看法。换句话说，另一个指令，比如说一个典型的 <select>或者自定义无限滚动或 yelp 风格的 map ，将提供不同的 View 行为，但从 Controller 的 Angular 来看在功能上是等效的 - 这保持了关注点的分离完整，因此非常 MVVM-y。

我还认为您对 ng-model 有一些困惑。 ng-model应该与用户直接交互的输入控件(不仅仅是 <input> )一起使用。在这种情况下，唯一的输入是 typeahead 指令。

在#2上，这取决于“其他相关详细信息”是否是服务 API 的自然组成部分，或者是否需要在选择后获取。假设是前者，理论上，正确的位置是在服务中。 Controller 应该只将数据从服务编码到 ViewModel 并返回。

对于包含国家/地区代码的特定示例，API 返回 address_components 中的多个组件属性(property)。国家/地区代码的提取 - 以及检查它是否存在以及其他业务逻辑 - 最好在服务中处理，可能在选择后使用另一个服务 API，或者在获得原始地址列表时 - 任何有意义的事情针对您的情况。

对于简单应用中的简单情况，如示例中所示，您可以只需修改 $scope.getLocation()函数返回 Controller (或者更确切地说是 ViewModel)实际需要的实际对象列表，然后让 View 返回选定的对象(按照#1)。