Angular控制器能绑定到网页的多个部分吗?

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

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

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

假设HTML看起来像这样:

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

你可以创建一个共享服务并注入到两个控制器中。这可以通过factory或service模式来实现。参见SO post angular。服务vs angular。

这是Angular的方式。更多信息请参见AngularJS服务文档。一个简单的例子可能包括…

<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链接

相关内容

最新更新

热门标签：