Angularjs 复杂布局应用

Posted 2023-02-26

【中文标题】Angularjs 复杂布局应用

【英文标题】：Angularjs complex layout application

【发布时间】：2013-10-24 04:26:14

【问题描述】：

我正在尝试使用 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 helper 来获取右侧的产品详细信息：

%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;
  ;
])

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

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

【问题讨论】：

听起来您正在寻找 ng-include。它就像它听起来的那样，它在当前模板中包含另一个模板。

非常感谢您的帮助。我使用angular ui-router 解决了这个问题，它允许我拥有嵌套的视图路线。再次感谢

【参考方案1】：

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

解决了问题