angularjs中部分之间的2路数据绑定

Question

希望解决看似相当简单的问题，但不知道如何进行。

我编写了一个简单的单页 angular 应用程序，最近开始将其切换到 ui.router（令人敬畏的 angular-ui 变体）。对于应用程序的要求，它允许我做的事情远远超过常规的ngRoute 模块（尤其是嵌套视图）。

在转换它之后，我发现我无法让数据在部分之间绑定。我有一个包含几个子视图的主视图，这些子视图需要能够在它们之间进行实时数据绑定。这在以前不是问题，因为每个组件都存在于一个视图中（我将它们拆分为子视图/部分，并将它们包含在 ui-router 中）。

所以，这是我现在设置的：

index.html 和 ui-view 中的主视图用于包含多个部分。

main view
   -form partial
   -preview pane partial
   -review partial
   -submission partial

我只创建了一个控制器来处理应用程序的这一部分；部分似乎适用于控制器传递的数据，但不适用于彼此之间的数据绑定。

我需要做的是实现表单部分输入和预览部分之间的实时数据绑定；最好的方法是什么？服务，指令？

谢谢大家！

ps：如果你对UI Router不熟悉，你可以用普通的ngRoute来解释一下，我可以理解

编辑：这是我的状态设置方式：

（包含部分的主要区域，由 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>

（在 app.js 中）

        $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',
                }
            }
        })

我的控制器似乎在为每个部分工作，但我想根据另一个（表单）中的输入来评估一个部分（侧边栏）中的表达式。希望这能让我的问题更清楚一些；非常感谢您的帮助！

Answer 1

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

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

据我了解，HTML 中的冗余声明很可能会在您的 DOM 中创建一个额外的 $scope。它可以使事情变得怪异。尝试删除它，看看是否有帮助。