Question

使用Angularjs UI-Router我正在尝试构建一个包含主视图和侧面细化/过滤结果视图的典型页面。

我已经分叉了示例应用程序，现在将其修改为具有显示过滤器视图和主视图的父抽象状态，以便我可以共享抽象状态解析的数据。

问题是我无法在不破坏范围继承的情况下显示过滤器视图。如果我添加'views'参数，它会打破范围，那么我怎样才能使它工作？

这是我的代码和 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");
      }
  })

儿童状态：

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

我已经将列表，地图和过滤器视图构建为指令，所以我希望一旦我能够使这个演示工作，我可以相对容易地交换它们。

Answer 1

有updated plunker

我想说，这里的问题是：

任何controller属于view而不属于州

所以这是经过调整的代码：

.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'
      }
    },

检查文档：

Views override state's template properties

如果您定义了一个视图对象，那么您的州的templateUrl，template和templateProvider将被忽略。因此，在您需要这些视图的父布局的情况下，您可以定义包含模板的抽象状态，以及包含＆＃39;视图的布局状态下的子状态。对象

行动中的plunker to check

如何在抽象状态模板中显示多个视图？

1 个答案:

Views override state's template properties