gpt4 book ai didi

javascript - Angular Controller 可以绑定(bind)到网页的多个部分吗?

转载 作者:行者123 更新时间:2023-11-29 18:06:56 24 4
gpt4 key购买 nike

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

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

另一种解决方案可能是将输入绑定(bind)到一个对象,该对象可以成为两个不同 Controller 的成员,但这听起来有点杂乱无章。

假设 HTML 如下所示:

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

最佳答案

您可以创建共享服务并注入(inject)到两个 Controller 中。这可以通过 factoryservice 模式来实现。请参阅 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

关于javascript - Angular Controller 可以绑定(bind)到网页的多个部分吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30518309/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com