在不同的元素上使用相同的控制器来引用同一个对象
我想如果我掌握ng-controller="GeneralInfoCtrl"
在我的DOM中的多个元素,他们将共享相同的$scope
(或至less双向绑定不工作)。
我想这样做的原因是因为我在HTML的不同部分有不同的只读视图和相关的modal dialog,并且它们不共享一个共同的祖先(除<body>
和<html>
)。
有没有办法让两个控制器引用相同的对象/使其之间的数据绑定工作?
以下是一些坚持使用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中findng-controller,就会创build一个新的作用域。 (如果您使用ng-view,则每当您转到不同的路由时,都会创build一个新的作用域。)
如果您需要在控制器之间共享数据,通常服务是您的最佳select。 将共享数据放入服务中,并将服务注入到控制器中:
function GeneralInfoCtrl($scope, MyService) {
然后每个范围/控制器实例将能够访问共享数据。
请注意,服务是单身人士,所以只有一个共享数据实例。
这是一个小提琴 (我没有写)显示两个控制器如何共享数据。
另请参见AngularJS:如何在控制器之间传递variables? 和
Angularjs:双向数据绑定和控制器重新加载 。
只需将共享数据放在根作用域中,就可以在任何地方使用它们。 在Angular中$rootScope
是所有作用域的根,可以在控制器中用于pipe理必须在所有模块中可见的数据。 要使用它只需将其注入控制器function。 有关详细说明,请参阅Angular开发人员指南和API文档 。