Angularjs 使用指令将内容添加到ng视图之外的区域

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

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

<p>Product page content</p>

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

产品页面内容

'产品\侧边栏'%>

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

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

与加载到ng视图中的模板一起提供的自定义指令，例如

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

<sidebar>
   Content for sidebar
</sidebar>

视图的主要内容

侧边栏的内容

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

这种方式对我来说更自然，因为结果与RubyonRails方式最接近，但我不确定这是一个合适的解决方案，还是我以后会遇到问题的解决方案（我对Angular非常陌生）

欢迎有任何想法或建议

2006年6月18日更新

我找到了AngularUI路由器项目：它似乎以一种正式的方式满足了我的需求。目前倾向于将其作为解决方案。

试试这个（未经测试）

您可以在

元素之外有另一个元素：例如，

。由于您可以在中向

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的引用（需要/想要多个NG视图）。据我所知，未来还有一些工作需要支持。同样在最近的1.2视频中，他们提到了ng if，它显然添加/删除了dom元素，而不是像ng show/hide那样切换可见性，虽然我自己还没有尝试过，但这可能也会有帮助。我将对自定义指令进行表决。为什么不在要自定义的节上附加一个单独的控制器，并根据其

$scope

中的值呈现该节？@akonsu:对不起，您能稍微扩展一下该解决方案吗？@matthewrk我是说，您有您的

元素，您可以在

ng视图之外有另一个元素：
，因为您可以在
侧栏控件中插入任意数量的依赖项，您可以使用
$location
作为其参数之一，并检查其中的位置，并将属性添加到
$scope
以使
div
显示所需的内容。在这里，我有一个网站将其用于导航栏：，控制器：啊，我明白了，对于一个小型应用程序来说，这是一个不错的解决方案，但是如果你有大量不同的侧栏模板，它可能会有点混乱，可能如果它像我在上面#1中所描述的那样从路由读取侧栏url，它会减少“断开连接”。不幸的是，我还不能投票，但谢谢你的帮助：）