如何显示在一个抽象状态模板多个视图？ [英] How do I show multiple views in an abstract state template?

问题描述

使用Angularjs UI的路由器，我试图建立一个典型的页面与主图和侧细化/过滤结果视图。

我已经分叉的示例应用程序，现在修改它有一个显示过滤器视图，主视图，这样我可以共享的抽象状态解决了数据的父抽象状态。

问题是我不能让过滤器视图出现不破坏范围继承。如果我添加若干意见参数它打破了范围，使我怎么能得到这个工作？

下面是我的code和 Plunker

  $ stateProvider
  .STATE（'应用'，{
      摘要：真实，
      网址：'/应用程序'，
      templateUrl：planning.html'，
      控制器：函数（$范围）{
          $ scope.planning = {[ID：0，名称：爱丽丝}，{ID：1，名称：鲍勃}];          $ scope.filterPlanning =功能（数据）{
            无功输出= $ scope.planning;
            //测试过滤器
            输出= $滤波器（'过滤器'）（{名：爱丽丝}）;
            返回输出;
          }
      }，
       / *这打破由孩子的意见被继承的范围
      观点：{
          ''：{
            templateUrl：applications.html
          }，
          过滤器@应用：{
            templateUrl：applications.filters.html
          }
      } * /
      的OnEnter：功能（）{
        的console.log（进入应用程序）;
      }
  }）
 

子状态：

  .STATE（'applications.list'，{
      网址：'/名单，
      //加载到父母的模板的用户界面视图
      templateUrl：planning.list.html'，
      的OnEnter：功能（）{
        的console.log（进入applications.list）;
      }
  }）
  .STATE（'applications.map'，{
      网址：'/图，
      //加载到父母的模板的用户界面视图
      templateUrl：planning.map.html'，
      的OnEnter：功能（）{
        的console.log（进入applications.map）;
      }
  }）
 

applications.html

 ＆LT; D​​IV CLASS =行＆GT;
  ＆LT; D​​IV CLASS =span4＆GT;
    ＆LT;格UI视图=过滤器＆GT;＆LT; / DIV＆GT;
  ＆LT; / DIV＆GT;
  ＆LT; D​​IV CLASS =span8＆GT;
    ＆LT;格UI的视图＆gt;＆LT; / DIV＆GT;
  ＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
 

我已经列表，地图和过滤器的观点建成指令，因此我希望，一旦我能得到这个工作演示，我可以换他们相对容易。

解决方案

有已更新plunker

我会说，这里的问题是：

  

任何控制器属于视图不是的状态的

所以这是调整后的code：

  .STATE（'应用'，{
    摘要：真实，
    网址：'/应用程序'，
    // templateUrl和控制器这里跳过
    // 不曾用过
    // templateUrl：applications.html'，
    //控制器：...
    观点：{
      ''：{
        templateUrl：applications.html'，
        控制器：函数（$范围，$过滤器）{
            $ scope.planning = [
              {ID：0，名称：爱丽丝}，
              {ID：1，名称：鲍勃}
            ];            $ scope.filterPlanning =功能（数据）{
              无功输出= $ scope.planning;
              //测试过滤器
              输出= $滤波器（'过滤器'）（{名：爱丽丝}）;
              返回输出;
            }
        }，
      }，
      过滤器@应用：{
        templateUrl：applications.filters.html
      }
    }，
 

检查DOC：

正文覆盖国家的模板属性

  

如果你定义一个对象的意见，你的国家的templateUrl，模板，templateProvider将被忽略。所以，你需要这些意见的父布局的情况下，你可以定义包含若干意见对象的布局状态下包含模板一个抽象的状态，和一个孩子的状态。

借助 plunker检查它在行动

Using Angularjs UI-Router I'm trying to build a typical page with a main view and a side refine/filter results view.

I've forked the sample app and now modifying it to have a parent abstract state that displays the filters view and the main view so that I can share the data that the abstract state resolves.

The problem is I cannot get the filters view to appear without breaking the scope inheritance. If I add the 'views' param it breaks the scope so how can I get this to work?

Here's my code and Plunker

$stateProvider
  .state('applications', {
      abstract: true,
      url: '/applications',
      templateUrl: 'planning.html',
      controller: function($scope){
          $scope.planning = [{ id:0, name: "Alice" }, { id:1, name: "Bob" }];

          $scope.filterPlanning = function(data) {
            var output = $scope.planning;
            // test filter
            output = $filter('filter')({ name: "Alice" });
            return output;
          }
      },
       /* this breaks the scope from being inherited by the child views
      views: {
          '': {
            templateUrl: 'applications.html'
          },
          'filters@applications': {
            templateUrl: 'applications.filters.html'
          }
      },*/
      onEnter: function(){
        console.log("enter applications");
      }
  })

child states:

  .state('applications.list', {
      url: '/list',
      // loaded into ui-view of parent's template
      templateUrl: 'planning.list.html',
      onEnter: function(){
        console.log("enter applications.list");
      }
  })
  .state('applications.map', {
      url: '/map',
      // loaded into ui-view of parent's template
      templateUrl: 'planning.map.html',
      onEnter: function(){
        console.log("enter applications.map");
      }
  })

applications.html

<div class="row">
  <div class="span4">
    <div ui-view="filters"></div>
  </div>
  <div class="span8">
    <div ui-view></div>
  </div>
</div>

I already have the list, map and filters views built as directives so I'm hoping once I can get this demo working I can swap them in relatively easily.

解决方案

There is updated plunker

I would say, that the issue here is:

Any controller belongs to view not to state

so this is the adjusted code:

.state('applications', {
    abstract: true,
    url: '/applications',
    // templateUrl and controller here are SKIPPED
    // not used
    // templateUrl: 'applications.html',
    // controller: ...
    views: {
      '': { 
        templateUrl: 'applications.html',
        controller: function($scope, $filter){
            $scope.planning = [
              { id:0, name: "Alice" }, 
              { id:1, name: "Bob" }
            ];

            $scope.filterPlanning = function(data) {
              var output = $scope.planning;
              // test filter
              output = $filter('filter')({ name: "Alice" });
              return output;
            }
        },
      },
      'filters@applications': {
        templateUrl: 'applications.filters.html'
      }
    },

Check the doc:

Views override state's template properties

If you define a views object, your state's templateUrl, template and templateProvider will be ignored. So in the case that you need a parent layout of these views, you can define an abstract state that contains a template, and a child state under the layout state that contains the 'views' object.

The plunker to check it in action

这篇关于如何显示在一个抽象状态模板多个视图？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！