上使用不同的元素在同一个控制器来指代相同的对象 [英] Using the same controller on different elements to refer to the same object
问题描述
我想如果我打了 NG-控制器=GeneralInfoCtrl在我的DOM多个元素，他们将共享相同的 $范围（或至少双向绑定是不工作）。
我想这样做的原因是因为我来自有不同的只读的HTML非常不同部位具有相关模态对话框的看法，他们不共享一个共同的祖先（除了＆LT;身体GT; 和＆LT; HTML方式＆gt; ）
有没有办法让两个控制器指的是同一个对象/使数据绑定它们之间工作的？
下面是一些code对于那些谁坚持看到标记，写在玉的
.client盒（NG-控制器=GeneralInfoCtrl）
.box的头
.box的标题
H5基本信息
.box的-按钮
button.btn.btn小（数据目标='＃editGeneralInfo，数据切换='模式'，以数据为背景='静态'）＆LT; I类=图标铅笔＆GT;＆LT; / I＆GT;编辑
.box的体
table.table.table-tight.table键 - 值
TR
日姓名
TD {{client.fullName（）}}
TR
届时，省钱！
TD {{client.aka}}
TR
日出生日期
TD {{client.birthDate |日期：'mediumDate'}}
...＃editGeneralInfo.modal.hide.fade（NG-控制器=GeneralInfoCtrl）
.modal头
button.close（类型='按钮'，数据驳回='模式'）及次;
H3编辑常规信息
.modal体
form.form-horizontal.form冷凝
。控制组
label.control标签名
.controls
输入（类型='文字'，占位符='名'，NG-模式='client.firstName'）
。控制组
label.control标签姓
.controls
输入（类型='文字'，占位符='姓'，NG-模式='client.lastName'）
。控制组
label.control标签时，省钱！
.controls
输入（类型='文字'，占位符='AKA'，NG-模式='client.aka'）
。控制组
label.control标签出生日期
.controls
输入（类型='文字'，占位符='MM / DD / YYYY，NG-模式='client.birthDate'）
...
和我的控制器：
函数GeneralInfoCtrl（$范围）{
$ scope.client = {
姓：'查理'，
名字：'布朗'，
生日：新的日期（2009，12，15）
...
}
}
每次角编译器中发现的HTML NG-控制器，创建一个新的范围。 （如果你用NG-视图，每次你去一个不同的路线时，都会创建一个新的范围了。）
如果您需要在控制器之间共享数据，通常一个服务是您最佳的选择。将共享数据到服务，并注入该服务到控制器：
函数GeneralInfoCtrl（$范围，为MyService）{
每个范围/控制器实例随后将能够访问共享数据。
注意，服务是单身，所以只会有你周围的共享数据的一个实例。
下面是一个小提琴（我没有写），显示两个控制器如何共享数据。
另请参阅
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).
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?
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')
...
And my controller:
function GeneralInfoCtrl($scope) {
$scope.client = {
firstName: 'Charlie',
lastName: 'Brown',
birthDate: new Date(2009, 12, 15),
...
}
}
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.
Here is a fiddle (I didn't write it) showing how two controllers can share data.
See also pass variables between controllers and
Angularjs: two way data bindings and controller reload.
这篇关于上使用不同的元素在同一个控制器来指代相同的对象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
