使用 ui-router 共享单个控制器的单个状态中的多个视图答案

【问题标题】：multiple views in a single state sharing a single controller using ui-router使用 ui-router 共享单个控制器的单个状态中的多个视图
【发布时间】：2015-03-27 21:07:55
【问题描述】：

我已经定义了我的状态，如下所示，

模板如下，

     <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 变量，或者每个视图是否应该具有单独的控制器和操作栏视图是否具有单独的控制器。

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

【问题讨论】：

您可以将部分定义为控制器的范围，或整个布局。
更新：我尝试将控制器添加到基本布局状态它不起作用。如果我将控制器添加到操作栏视图，即使我引用的是同一个控制器，按钮也会显示
@Radim-Kohler 有什么建议吗？？

标签： angularjs angular-ui-router angular-ui

【解决方案1】：

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

首先，您将一个变量设置为从您的 json 中返回的数据对象数组。在不知道您的数据是什么样子的情况下，让我们假设您的“数据”对象看起来像这样。

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

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

$scope.data = theJsonDataIGot;

在每个视图中，绑定到您需要的数据。您可以为每个视图创建一个单独的 .html 模板。

即在视图 1 中：

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

即在视图 2 中：

<ul>
    <li ng-repeat="otherthing in data.thingsforview2">
        {{ otherthing.name }}
    </li>
</ul>

根据 url 返回不同的模板。

app.config(['$routeProvider',
      function($routeProvider) {
        $routeProvider.
          when('/view1', {
            templateUrl: 'views/view1.html'
          }).
          when('/view2', {
            templateUrl: 'views/view2.html'
          }).
          otherwise({
            redirectTo: '/'
          });
      }]);

您将包含以下标记：

<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>

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

【讨论】：

感谢 CodeBob。我目前在角度使用 ui-router，它使用状态来定义 ui-routes。因此，我们可以按照我上面指定的方式定义多个视图，我想知道我是否可以将一个控制器用于完整状态，而不是指定 2 个控制器。我应该创建一个类似于布局服务的服务，它有助于共享范围变量并使用一个控制器吗？？？
这取决于您的数据有多复杂以及您想要做什么。话虽如此，我只会使用一个控制器，保持简单。仅仅因为它是不同的状态并不意味着它必须是不同的控制器。状态描述了控制器、模板和视图属性的组合。根据您要显示的内容切换模板和视图属性。如果需要，您可以进入服务来处理 NON-VIEW 逻辑，并在应用程序增长时共享服务。