在不同元素上使用相同的控制器来引用相同的对象 [英] Using the same controller on different elements to refer to the same object
问题描述
我想如果我在 DOM 中的多个元素上添加 ng-controller="GeneralInfoCtrl"，它们将共享相同的 $scope(或至少双向绑定不是不工作).
I figured if I slapped ng-controller="GeneralInfoCtrl" on multiple elements in my DOM they would share the same $scope (or least two-way binding isn't working).
我想这样做的原因是因为我在 HTML 的不同部分有不同的只读视图和关联的模态对话框，并且它们不共享一个共同的祖先(除了 和 ).
The reason I want to do this is because I have different read-only views with associated modal dialogs in very different parts of the HTML and they don't share a common ancestor (aside from <body> and <html>).
有没有办法让两个控制器都引用同一个对象/让它们之间的数据绑定工作?
Is there a way to make both controllers refer to the same object/make data binding work between them?
这里有一些代码供那些坚持查看标记的人使用，用 Jade 编写:
Here's some code for those who insist on seeing markup, written in Jade:
.client-box(ng-controller="GeneralInfoCtrl")
.box-header
.box-title
h5 General Information
.box-buttons
button.btn.btn-small(data-target='#editGeneralInfo', data-toggle='modal', data-backdrop='static') <i class="icon-pencil"></i> Edit
.box-body
table.table.table-tight.table-key-value
tr
th Name
td {{client.fullName()}}
tr
th Also Known As
td {{client.aka}}
tr
th Birth Date
td {{client.birthDate|date:'mediumDate'}}
...
#editGeneralInfo.modal.hide.fade(ng-controller="GeneralInfoCtrl")
.modal-header
button.close(type='button', data-dismiss='modal') ×
h3 Edit General Information
.modal-body
form.form-horizontal.form-condensed
.control-group
label.control-label First Name
.controls
input(type='text', placeholder='First Name', ng-model='client.firstName')
.control-group
label.control-label Last Name
.controls
input(type='text', placeholder='Last Name', ng-model='client.lastName')
.control-group
label.control-label Also Known As
.controls
input(type='text', placeholder='AKA', ng-model='client.aka')
.control-group
label.control-label Birth Date
.controls
input(type='text', placeholder='MM/DD/YYYY', ng-model='client.birthDate')
...
还有我的控制器:
function GeneralInfoCtrl($scope) {
$scope.client = {
firstName: 'Charlie',
lastName: 'Brown',
birthDate: new Date(2009, 12, 15),
...
}
}
推荐答案
每次 Angular 编译器在 HTML 中找到 ng-controller 时，都会创建一个新的作用域.(如果你使用 ng-view，每次你去不同的路线时，也会创建一个新的范围.)
Each time the Angular compiler finds ng-controller in the HTML, a new scope is created. (If you use ng-view, each time you go to a different route, a new scope is created too.)
如果您需要在控制器之间共享数据，通常服务是您的最佳选择.将共享数据放入服务中，并将服务注入控制器:
If you need to share data between controllers, normally a service is your best option. Put the shared data into the service, and inject the service into the controller:
function GeneralInfoCtrl($scope, MyService) {
然后每个作用域/控制器实例将能够访问共享数据.
Each scope/controller instance will then be able to access the shared data.
请注意，服务是单例的，因此您的共享数据只会有一个实例.
Note that services are singletons, so there will only be one instance of your shared data around.
这是一个 fiddle(我没有写)展示了两个控制器如何共享数据.
Here is a fiddle (I didn't write it) showing how two controllers can share data.
另见 AngularJS:如何在控制器之间传递变量? 和
Angularjs:双向数据绑定和控制器重新加载.
这篇关于在不同元素上使用相同的控制器来引用相同的对象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
