Question

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

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

<p>Product page content</p>

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

我正在努力确定在Angular中实现这一目标的最佳方法。我已经使用了两种方法：

SidebarUrl添加到路由定义中，路由更改事件更新了一个范围变量，ng-include指令在布局中使用该范围变量。

使用加载到ng-view中的模板提供的自定义指令，例如

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

<sidebar>
   Content for sidebar
</sidebar>

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

这种方式对我来说更自然，因为结果最接近Ruby on Rails方式，但我不确定它是否是一个不错的解决方案或者我将在以后遇到问题的东西（我很新角）。

欢迎任何想法或建议。

更新18/06

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

Answer 1

试试这个（未经测试）。

您可以在<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路由器组件似乎是你需要的，它看起来更强大。但是，当你只需要一些简单的东西并且不想再有一个依赖时，我的解决方案会很有用。

使用指令将内容添加到ng-view之外的区域

1 个答案: