Javascript angularjs中部分之间的双向数据绑定

Javascript angularjs中部分之间的双向数据绑定,javascript,angularjs,angular-ui-router,Javascript,Angularjs,Angular Ui Router,试图解决看似相当简单的问题,但不确定如何继续 我已经编写了一个简单的单页angular应用程序,最近开始将其切换到ui.router,这是一款很棒的angular ui。对于应用程序的要求,它允许我做的远远超过常规的ngRoute模块,尤其是嵌套视图 在转换之后,我发现我在获取数据以在片段之间绑定时遇到了问题。我有一个主视图和几个子视图,需要能够在它们之间进行实时数据绑定。这以前不是问题,因为每个组件都存在于一个视图中,我将它们拆分为子视图/部分,并将它们包含在ui路由器中 下面是我现在设置的:

试图解决看似相当简单的问题,但不确定如何继续

我已经编写了一个简单的单页angular应用程序,最近开始将其切换到ui.router,这是一款很棒的angular ui。对于应用程序的要求,它允许我做的远远超过常规的ngRoute模块,尤其是嵌套视图

在转换之后,我发现我在获取数据以在片段之间绑定时遇到了问题。我有一个主视图和几个子视图,需要能够在它们之间进行实时数据绑定。这以前不是问题,因为每个组件都存在于一个视图中,我将它们拆分为子视图/部分,并将它们包含在ui路由器中

下面是我现在设置的:

index.html中的主视图以及用于包含多个部分的ui视图

main view
   -form partial
   -preview pane partial
   -review partial
   -submission partial
我只创建了一个控制器来处理应用程序的这个部分;这些部分似乎可以处理控制器传递的数据,但不能处理彼此之间的数据绑定

我需要做的是在表单部分和预览部分中的输入之间实现实时数据绑定;最好的办法是什么?服务、指令

谢谢大家

ps:如果你不熟悉UI路由器,你可以用常规的路由来解释,我可以理解

编辑:以下是如何设置我的状态:

包含分部的主要区域,由ng app指令封闭

<div ng-controller="MainCtrl" class="contstrain_y_scroll">
        <section>
     <div ui-view="form"></div>
     <div ui-view="tribute"></div>
     <div ui-view="submit"></div>
     <div ui-view="sidebar"></div>                   

    </section>
</div>

我的控制器似乎在为每个部分工作,但我想根据另一种形式的输入计算一个部分侧栏中的表达式。希望这能让我的问题更清楚一点;非常感谢你的帮助

我注意到的一件事是,在div上有一个ng controller=MainCtrl声明

默认情况下,当您使用ui路由器时,您在状态定义中指定的控制器将自动应用于整个页面。通过在HTML中再次声明它,基本上就是两次声明


据我所知,HTML中的冗余声明很可能会在DOM中创建额外的$scope。它会让事情变得古怪。尝试删除它,看看是否有帮助。

我注意到的一件事是,您的div上有一个ng controller=MainCtrl声明

默认情况下,当您使用ui路由器时,您在状态定义中指定的控制器将自动应用于整个页面。通过在HTML中再次声明它,基本上就是两次声明


据我所知,HTML中的冗余声明很可能会在DOM中创建额外的$scope。它会让事情变得古怪。尝试删除该服务,看看是否有帮助。

通常,对于不同控制器之间的数据共享,您会使用一项服务。我看不出这里有什么不同。没错,但这不是控制器之间的区别。我在一部分中有一个ng模型,在另一部分中有一个表达式,我需要相互通信。一个服务是否也能做到这一点?你能提供你所在州的设置代码吗?还有可能是发生部分交互的HTML片段?我仍然不太清楚,如果所有部分共享同一个控制器,为什么会出现任何问题。当然!我会更新问题更新;希望这能让我想得到的更清楚一点。angular还是一个新手,以前还没有遇到过这个用例,所以我感谢您的帮助!通常,对于不同控制器之间的数据共享,您将使用服务。我看不出这里有什么不同。没错,但这不是控制器之间的区别。我在一部分中有一个ng模型,在另一部分中有一个表达式,我需要相互通信。一个服务是否也能做到这一点?你能提供你所在州的设置代码吗?还有可能是发生部分交互的HTML片段?我仍然不太清楚,如果所有部分共享同一个控制器,为什么会出现任何问题。当然!我会更新问题更新;希望这能让我想得到的更清楚一点。angular还是一个新手,以前还没有遇到过这个用例,所以我感谢您的帮助!我从状态配置区域删除了控制器声明,它现在可以工作了;其他一些表达式没有绑定,但我会检查它们,以确保它们不会因为其他原因出错。谢谢关于Angular的后续问题:partials之间的双向绑定是否需要控制器?我不记得在文档中看到过这方面的任何内容,但可能我没有看到。@markimus您在HTML中使用的所有变量都需要存储在某个地方。某个地方碰巧有一个绑定到控制器的$scope。如果变量存储在同一控制器/$scope中,则可以在一个位置控制这些变量。所以对于您的问题,它甚至不是关于双向绑定,而是关于范围问题。Tha
nks$在angularI中,作用域似乎是需要真正理解的比较棘手的事情之一,它从状态配置区域中删除了控制器声明,现在可以工作了;其他一些表达式没有绑定,但我会检查它们,以确保它们不会因为其他原因出错。谢谢关于Angular的后续问题:partials之间的双向绑定是否需要控制器?我不记得在文档中看到过这方面的任何内容,但可能我没有看到。@markimus您在HTML中使用的所有变量都需要存储在某个地方。某个地方碰巧有一个绑定到控制器的$scope。如果变量存储在同一控制器/$scope中,则可以在一个位置控制这些变量。所以对于您的问题,它甚至不是关于双向绑定,而是关于范围问题。谢谢$范围似乎是一个棘手的事情,真正理解好角度
        $stateProvider
        .state('main', {
            url: '/',
            controller: 'MainCtrl',
            views: {
                'sidebar': {
                    templateUrl: 'views/partials/main.sidebar.html',

                },
                'form': {
                    templateUrl: 'views/partials/main.form.html',

                },
                'tribute': {
                    templateUrl: 'views/partials/main.tribute.html',
                },
                'submit': {
                    templateUrl: 'views/partials/submit.html',
                }
            }
        })