假设我编写了一个网页，要求用户在表单中键入数据。假设页面有两个部分在 DOM 中完全独立，但逻辑上相关。我需要将它们绑定(bind)到一个模型。
我能想到的第一个(糟糕的)解决方案是完全重构页面，以便绑定(bind)到模型的所有内容都包含在单个 <div> 中。元素(或者甚至可能将 Controller 放在 <body> 元素上)。
另一种解决方案可能是将输入绑定(bind)到一个对象，该对象可以成为两个不同 Controller 的成员，但这听起来有点困惑。
假设 HTML 如下所示:
<input ng-model='data1' />
<div>
<!-- something complicated -->
</div>
<input ng-model='data2' />
最佳答案
您可以创建共享服务并将其注入(inject)到两个 Controller 中。这可以通过工厂或服务模式来实现。请参阅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!
}]);
关于javascript - Angular Controller 可以绑定(bind)到网页的多个部分吗？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30518309/