Question

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

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

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

假设HTML看起来像这样：

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

Answer 1

您可以创建共享服务并注入两个控制器。这可以通过factory或service模式实现。有关两者之间差异/相似性的一些见解，请参阅SO angular.service vs angular.factory。

这是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控制器可以绑定到网页的多个部分吗？

1 个答案: