angularjs - 在不同的元素上使用相同的 Controller 来引用同一个对象-6ren

angularjs - 在不同的元素上使用相同的 Controller 来引用同一个对象

转载作者：行者123 更新时间：2023-12-03 06:34:13

25

4

我想如果我打了ng-controller="GeneralInfoCtrl"在我的 DOM 中的多个元素上，它们将共享相同的 $scope (或者至少双向绑定(bind)不起作用)。

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

有没有办法让两个 Controller 引用同一个对象/使数据绑定(bind)在它们之间工作？

<小时/>

对于那些坚持要查看标记的人来说，这里有一些代码，用 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')
...

还有我的 Controller :

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

最佳答案

每次 Angular 编译器在 HTML 中找到 ng-controller 时，就会创建一个新的作用域。 (如果您使用 ng-view，每次转到不同的路线时，也会创建一个新的范围。)

如果您需要在 Controller 之间共享数据，通常服务是您的最佳选择。将共享数据放入服务中，并将服务注入(inject)到 Controller 中:

function GeneralInfoCtrl($scope, MyService) {

每个作用域/ Controller 实例都将能够访问共享数据。

请注意，服务是单例的，因此共享数据只会有一个实例。

这是一个fiddle (我没有写)展示了两个 Controller 如何共享数据。

另请参阅AngularJS: How can I pass variables between controllers?和
Angularjs: two way data bindings and controller reload .

关于angularjs - 在不同的元素上使用相同的 Controller 来引用同一个对象，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14453216/

25

4

0

文章推荐： r - 将变量向量传递到 lm() 公式中

文章推荐： ember.js - Ember 如何将变量传递给 Ember.compulated.filterBy

文章推荐： assembly - A20线在保护模式下起什么作用？

文章推荐： angularjs - Angular UI-Router 如何创建 "layout"状态？

java - 对象 a = 对象 b；对象 a 会发生什么？
我的一位教授给了我们一些考试练习题，其中一个问题类似于下面(伪代码): a.setColor(blue); b.setColor(red); a = b; b.setColor(purple); b
JavaScript 测试(对象 && 对象 !== "null"&& 对象 !== "undefined")
我似乎经常使用这个测试 if( object && object !== "null" && object !== "undefined" ){ doSomething(); } 在对象上，我
C#对象/对象
C# Object/object 是值类型还是引用类型？我检查过它们可以保留引用，但是这个引用不能用于更改对象。 using System; class MyClass { public s
javascript - 通过ajax发送json - 对象 - 对象
我在通过 AJAX 发送 json 时遇到问题。 var data = [{"name": "Will", "surname": "Smith", "age": "40"},{"name": "Wil
javascript - 如何获取值[对象][对象]
当我尝试访问我的 View 中的对象 {{result}} 时(我从 Express js 服务器发送该对象)，它只显示 [object][object]有谁知道如何获取 JSON 格式的值吗？这是
java - 对象...对象[] 和格式
我有不同类型的数据(可能是字符串、整数......)。这是一个简单的例子: public static void main(String[] args) { before("one"); }
javascript - 如何修复[对象，对象]
嗨，我是 json 和 javascript 的新手。我在这个网站找到了使用json数据作为表格的方法。我很好奇为什么当我尝试使用 json 数据作为表时，我得到 [Object,Object]
JavaScript [对象][对象] 调试
已关闭。此问题需要 debugging details 。目前不接受答案。编辑问题以包含 desired behavior, a specific problem or error, and the
java - 对象==空或空==对象？
我听别人说 null == object 比 object == null check 例如: void m1(Object obj ) { if(null == obj) // Is thi
VBS教程：对象-Match 对象
Match 对象提供了对正则表达式匹配的只读属性的访问。说明 Match 对象只能通过 RegExp 对象的 Execute 方法来创建，该方法实际上返回了 Match 对象的集合。所有的
VBS教程：对象-Class 对象
Class 对象使用 Class 语句创建的对象。提供了对类的各种事件的访问。说明不允许显式地将一个变量声明为 Class 类型。在 VBScript 的上下文中，“类对象”一词指的是用
VBS教程：对象-Folder 对象
Folder 对象提供对文件夹所有属性的访问。说明以下代码举例说明如何获得 Folder 对象并查看它的属性： Function ShowDateCreated(f
VBS教程：对象-File 对象
File 对象提供对文件的所有属性的访问。说明以下代码举例说明如何获得一个 File 对象并查看它的属性： Function ShowDateCreated(fil
VBS教程：对象-Drive 对象
Drive 对象提供对磁盘驱动器或网络共享的属性的访问。说明以下代码举例说明如何使用 Drive 对象访问驱动器的属性： Function ShowFreeSpac
VBS教程：对象-FileSystemObject 对象
FileSystemObject 对象提供对计算机文件系统的访问。说明以下代码举例说明如何使用 FileSystemObject 对象返回一个 TextStream 对象，此对象可以被读
对象
我是 javascript OOP 的新手，我认为这是一个相对基本的问题，但我无法通过搜索网络找到任何帮助。我是否遗漏了什么，或者我只是以错误的方式解决了这个问题？这是我的示例代码: functio
对象
我可以很容易地创造出很多不同的对象。例如像这样: var myObject = { myFunction: function () { return ""; } };
对象
function Person(fname, lname) { this.fname = fname, this.lname = lname, this.getName = function()
javascript - JSON 返回(对象，对象)
任何人都可以向我解释为什么下面的代码给出 (object, Object) 吗？ (console.log(dope) 给出了它应该的内容，但在 JSON.stringify 和 JSON.parse
javascript - 返回 [对象，对象] 的工具提示
我正在尝试完成散点图 exercise来自免费代码营。然而，我现在只自己学习了 d3 几个小时，在遵循 lynda.com 的教程后，我一直在尝试确定如何在工具提示中显示特定数据。 This code

首页

博学

6Ren·AI

商城

angularjs - 在不同的元素上使用相同的 Controller 来引用同一个对象