在不同元素上使用相同的控制器来引用同一个对象

Question

在不同元素上使用相同的控制器来引用同一个对象

我想如果我打ng-controller="GeneralInfoCtrl"了我的DOM中的多个元素,他们会共享相同的$scope(或者至少双向绑定不起作用).

我想这样做的原因是因为我在HTML的不同部分有不同的只读视图和相关的模态对话框,并且它们不共享共同的祖先(除了<body>和<html>).

有没有办法让两个控制器引用相同的对象/ make数据绑定在它们之间工作？

以下是那些坚持看到标记的代码,用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') &times;
        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')
...

Run Code Online (Sandbox Code Playgroud)

而我的控制器:

function GeneralInfoCtrl($scope) {
    $scope.client = {
        firstName: 'Charlie',
        lastName: 'Brown',
        birthDate: new Date(2009, 12, 15),
        ...
    }
}

Run Code Online (Sandbox Code Playgroud)

Answer 1

Mar*_*cok 76

每次Angular编译器在HTML中找到ng-controller时,都会创建一个新的范围.(如果使用ng-view,每次转到不同的路径时,也会创建新的范围.)

如果您需要在控制器之间共享数据,通常服务是您的最佳选择.将共享数据放入服务,并将服务注入控制器:

function GeneralInfoCtrl($scope, MyService) {

Run Code Online (Sandbox Code Playgroud)

然后,每个范围/控制器实例都可以访问共享数据.

请注意,服务是单例,因此只有一个共享数据实例.

这是一个小提琴(我没有写它),显示两个控制器如何共享数据.

另请参见AngularJS:如何在控制器之间传递变量？和
Angularjs:双向数据绑定和控制器重新加载.

Answer 2

rem*_*gio 13

只需将共享数据放在根范围内,您就可以在任何地方使用它们.Angular $rootScope是所有范围的根,可以在控制器中用于管理必须在所有模块中可见的数据.要使用它只需将其注入控制器功能.有关详细说明,请参阅Angular开发人员指南和API文档.

归档时间：	12 年，10 月前
查看次数：	39891 次
最近记录：	12 年，10 月前