Angular 控制器可以绑定到网页的多个部分吗？

Question

假设我编写了一个网页，要求用户将数据键入表单。假设在 DOM 中有两个完全独立的页面部分，但在逻辑上是相关的。我需要将它们绑定到一个模型。

我能想到的第一个（不好的）解决方案是完全重构页面，以便绑定到模型的所有内容都包含在单个 <div> 元素中（或者甚至可能将控制器放在<body> 个元素）。

另一种解决方案可能是将输入绑定到一个对象，该对象可以成为两个不同控制器的成员，但这听起来有点笨拙。

假设 HTML 看起来像这样：

<input ng-model='data1' />
<div>
    <!-- something complicated -->
</div>
<input ng-model='data2' />

Answer 1

您可以创建共享服务并注入到两个控制器中。这可以通过 factory 或 service 模式来实现。请参阅 SO post angular.service vs angular.factory 了解两者之间的 difference/similarity。

这是执行此操作的 Angular 方法。有关详细信息，请参阅 AngularJS services docs。一个简单的例子可能包括...

<div ng-app="app">
    <div ng-controller="ctrlA"></div>
    <div ng-controller="ctrlB"></div>
</div>

app.service('sharedService', [function () {
    this.someValue = 'yo!'
}]);

app.controller('ctrlB', ['$scope', 'sharedService', function($scope, sharedService) {
    console.log(sharedService.someValue) // yo!
}]);

app.controller('ctrlA', ['$scope', 'sharedService', function($scope, sharedService) {
    console.log(sharedService.someValue) // yo!
}]);

JSFiddle Link

Angular 控制器可以绑定到网页的多个部分吗？

Can an Angular controller bind to multiple parts of a web page?

html

javascript

angularjs

angularjs-controller