Question

我按照以下规定定义了我的状态，

模板如下所示，

     <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变量，或者如果每个视图都有一个单独的控制器，并且操作栏视图有一个单独的控制器，那么每个视图应该如何。 / p>

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

Answer 1

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

首先，从json中将变量设置为返回的数据对象数组。如果不知道您的数据是什么样子，请假装您的数据＆＃34;对象看起来像这样。

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

根据网址返回不同的模板。

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

您将包含以下标记：

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

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

单个状态下的多个视图使用ui-router共享一个控制器

1 个答案: