Angularjs 使用ui路由器在单个状态下共享单个控制器的多个视图

我已将我的状态定义如下：

模板如下所示：

     <div class="row-fluid">
        <section class="header">
            <div ui-view="header"></div>
        </section>

        <section class="content">
            <section class="actions">
                <div ui-view="action-bar"></div>
            </section>
        </section>

        <section class="footer">
            <div ui-view="footer"></div>
        </section>
    </div>


  .state('authenticated', {
        url: '/home',
        templateUrl: 'html/appShell.html'
    })
    .state('basicLayout', {
        parent: 'authenticated',
        url: '^/start',
        ***controller: 'abcController',***
        views: {
            '': {templateUrl: 'html/templates/basicLayout.html'},
            'header@basicLayout' : { 
               templateUrl:'html/templates/header.html',
                controller: 'abcController'},
            'action-bar@basicLayout' : { 
                templateUrl: 'html/templates/action-bar.html',
                controller: 'abcController'}
        }        
    })

我有一个json文件，它本质上包含模块名的数据，它进入到标题中，操作栏是一个指令，它需要来自配置的关于json中传递的每个按钮类型和操作的信息

我的问题是，我是否可以关联一个共享控制器来读取module.json中的数据并映射$scope变量，或者eg头的每个视图是否都有单独的控制器，操作栏视图是否有单独的控制器

---

我不希望每个视图都有多个控制器，我想知道最好的方法是什么？？？

回答您的问题。是的，您可以有一个包含作用域变量数据的控制器，并通过路由在不同视图中访问该数据

首先，为json返回的数据对象数组设置一个变量。在不知道数据是什么样子的情况下，让我们假设数据对象是这样的

{  
   "thingsforview1" : [ //lots of objects here ],
   "thingsforview2" : [ //lots of objects here ],
   "thingsforview3" : [ //lots of objects here ]
}

您可以在控制器上为该数据设置一个变量，名为：

$scope.data = theJsonDataIGot;

在每个视图中，绑定到所需的数据。每个视图都可以有一个单独的.html模板

i、 e.在视图1中：

<ul>
    <li ng-repeat="thing in data.thingsforview1">
        {{ thing }}
    </li>
</ul>

您将包括以下标记：

<div ng-view></div>

这是在点击不同的URL时显示不同模板的地方

希望有帮助

编辑

对您当前拥有的内容的简单更改是，单个控制器、页眉和页脚更改为指令，以及确定内容视图的状态

<div ng-controller="abcController">
    <div class="row-fluid">
            <section class="header">
                <div my-header></div>
            </section>

            <section class="content">
                <section class="actions">
                    <div ui-view="action-bar"></div>
                </section>
            </section>

            <section class="footer">
                <div my-footer></div>
            </section>
     </div>
</div>

---

然后，您可以从状态切换视图，仍然使用页眉和页脚模板，并从状态切换视图内容。或者，如果页眉和页脚的内容也发生了更改，请在不同视图的模板中包含这些指令。

您可以将该部分定义为控制器的范围或整个布局。更新：我尝试添加一个控制器，使其处于不工作状态。如果我将控制器添加到操作栏视图中，即使我引用了相同的按钮，也会显示这些按钮controller@Radim-科勒：有什么建议吗？谢谢你，鲍勃。我目前正在angular中使用ui路由器，它使用状态来定义ui路由。因此，我们可以定义我上面指定的多个视图，我想知道我是否可以调整为完整状态使用一个控制器，而不是指定两个控制器。我是否应该创建一个像布局服务这样的服务，它有助于共享范围变量并使用一个控制器？？？这取决于您的数据有多复杂以及您正在尝试做什么。也就是说，我只使用一个控制器，保持简单。仅仅因为它是一个不同的状态并不意味着它必须是一个不同的控制器。状态描述控制器、模板和视图属性的组合。根据要显示的内容切换模板和视图属性。如果需要，您可以进入服务来处理非视图逻辑，如果应用程序增长，您可以共享服务。

<div ng-view></div>

<div ng-controller="abcController">
    <div class="row-fluid">
            <section class="header">
                <div my-header></div>
            </section>

            <section class="content">
                <section class="actions">
                    <div ui-view="action-bar"></div>
                </section>
            </section>

            <section class="footer">
                <div my-footer></div>
            </section>
     </div>
</div>