CODEWITHSUNDEEP
angularjs
matthewrk
matthewrk

Reputation: 687

Using a directive to add content to areas outside ng-view

I'm attempting to port an existing Ruby on Rails frontend to Angular. So far I've managed to get a single page app in place that switches out the content of ng-view depending on your angular route. This is great, however - in my RoR layout I have several defined areas where content can be placed, all of these are contextual to the main view. For example: Sidebar and Heading.

In RoR I can do the following from within an action view to set sidebar content.

<p>Product page content</p>

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

I am struggling to determine the best method to achieve this in Angular. I've got it working with two methods:

  1. SidebarUrl added to route definitions, route change event updates a scope variable which an ng-include directive uses in the layout.

  2. Custom directive that is served with the template loaded into ng-view, e.g.

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

<sidebar>
   Content for sidebar
</sidebar>

The directive basically copies its innerHTML to the sidebar element in the main layout and then removes itself. It could be written to place the content into a target element defined by an attribute to make it more generic and reusable.

This way is more natural to me as the result is closest to the Ruby on Rails way but I'm not sure if its a decent solution or something that I will run into problems with later on (I'm very new to Angular).

Any thoughts or suggestions welcome.

UPDATE 18/06

I've found the Angular UI Router project: https://github.com/angular-ui/ui-router which seems to cover my requirements in an official way. Leaning towards that as a solution at the moment.

Upvotes: 1

Views: 3903

Answers (1)

akonsu
akonsu

Reputation: 29586

Try this (not tested).

You can have another element outside of your <div ng-view> element: say, <div id="sidebar" ng-controller="sidebarContr">. Since you can inject as many dependencies as you like in to sidebarContr, you can use $location as one of its parameters and check the location there and add properties to $scope to make the div display what you need.

For example:

in your controllers 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';
       }
     }
  ])
);

in your HTML:

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

EDIT: The Angular-UI Router component that you mention seems to be what you need, it looks more powerful. But my solution can be useful when you just need something simple and do not want to have one more dependency.

Upvotes: 2

Related Questions