Question

我正在尝试使用Angular Seed作为默认结构将 angularjs 设置到我的Rails 4应用中，但我很难理解这个问题。

我的布局由两部分组成。第一部分（左侧部分）包含产品清单：

%ul
  %li{ 'ng-repeat' => 'product in products | filter:search' }
    %a{ 'ng-click' => 'open(tier)' }
      %img{ 'ng-src' => '{{ tier.logo }}' }

另一部分是显示产品的详细信息，但也包括产品版本以及创建新产品的表格。就在那时，我真的很困惑。到目前为止，我使用ng-switch帮助程序来获取右侧的产品详细信息：

%ng-switch{ 'on' => 'details()' }
  %div{ 'ng-switch-when' => "true" }
    %header
      %span
        .h3 {{ opened.name }}
    .panel-body
      .tab-content
        .tab-pane.active
          %section.scrollable
            %img{ 'ng-src' => '{{ opened.logo_large }}' }

我的控制器看起来像这样：

controller('TiersController', ['$scope', '$routeParams', 'Tiers', 'ngProgress', '$timeout', function($scope, $routeParams, Tiers, ngProgress, $timeout) {
  $scope.tiers = Tiers.query();

  $scope.open = function(tier){
    if( $scope.isOpen(tier) ){
      $scope.opened = undefined;
    }else{
      $scope.opened = tier;
    }
  };

  $scope.isOpen = function(tier){
    return $scope.opened === tier;
  };

  $scope.details = function(){
    return $scope.opened !== undefined;
  };

  $scope.close = function(){
    $scope.opened = undefined;
  };
}])

到目前为止，左侧（产品列表）和右侧（详细信息）都在同一个视图文件中。当我点击产品并显示它的细节时，它工作正常。但是，如果我想向右侧注入另一个视图，例如表单，该怎么办？如何在产品布局中插入某种偏差？问题是，出于可维护性的目的，我不想将所有不同的视图写入同一个文件中。

希望我很清楚。非常感谢您的帮助

Answer 1

使用 angular ui-router https://github.com/angular-ui/ui-router

解决了问题

Angularjs复杂的布局应用

1 个答案: