1

我正在尝试将现有的 Ruby on Rails 前端移植到 Angular。到目前为止，我已经设法获得了一个单页应用程序，它可以根据您的角度路线切换 ng-view 的内容。然而，这很棒——在我的 RoR 布局中，我有几个可以放置内容的定义区域，所有这些都与主视图相关。例如：侧边栏和标题。

在 RoR 中，我可以在操作视图中执行以下操作来设置侧边栏内容。

<p>Product page content</p>

<% content_for :sidebar do %>
    <% render :partial => 'product_sidebar' %>
<% end %>

我正在努力确定在 Angular 中实现这一目标的最佳方法。我有两种方法可以使用它：

  1. SidebarUrl 添加到路由定义中，路由更改事件会更新 ng-include 指令在布局中使用的范围变量。

  2. 与加载到 ng-view 的模板一起提供的自定义指令，例如

    <p>Main content for the view</p>

<sidebar>
   Content for sidebar
</sidebar>

该指令基本上将其 innerHTML 复制到主布局中的侧边栏元素，然后将其自身删除。可以编写它以将内容放入由属性定义的目标元素中，以使其更通用和可重用。

这种方式对我来说更自然，因为结果最接近 Ruby on Rails 方式，但我不确定它是否是一个体面的解决方案，或者我以后会遇到问题（我对 Angular 很陌生）。

欢迎任何想法或建议。

更新 18/06

我找到了 Angular UI Router 项目：https ://github.com/angular-ui/ui-router ，它似乎以官方的方式满足了我的要求。目前倾向于将其作为解决方案。

4

1 回答 1

2

试试这个（未测试）。

你可以在你的元素之外有另一个<div ng-view>元素：比如说，<div id="sidebar" ng-controller="sidebarContr">. 由于您可以在 中注入任意数量的依赖项sidebarContr，因此您可以将$location其用作其参数之一并检查那里的位置并添加属性以$scope使 div 显示您需要的内容。

例如：

在你的控制器 JS 中：

(angular
 .module('app.controllers', ['ng'])
 .controller('sidebarContr', [
     /******/ '$scope', '$location',
     function ($scope,   $location) {
       if ($location.path() === '/') {
         $scope.file = 'include_0.html';
       else {
         $scope.file = 'include_1.html';
       }
     }
  ])
);

在您的 HTML 中：

<div id="sidebar" ng-controller='sidebarContr'>
  <div ng-include src='file'></div>
</div>

编辑：您提到的 Angular-UI 路由器组件似乎是您需要的，它看起来更强大。但是当您只需要一些简单的东西并且不想再有一个依赖项时，我的解决方案会很有用。

于 2013-06-18T14:38:02.050 回答