2

I'm trying to create a directive which is a sidebar in my shell page that will change accordingly whenever a new route is hit, and will populate itself with the sub menu items relevant to that parent route. I have 4 different menus which are external templates and i want the contents of those html files to replace the menu, the link function of my directive looks like this so far:

link: function(scope, element, attrs, ngModel) {
      scope.$on("$routeChangeSuccess", function (event, current, previous) {
                   element.html('<div ng-include=\'enterprisesMenu.html\'></div>');
                });
      };

But the element is not updating, however when i use inline templates the elements updates according, but because each template is complex i prefer not to have that html inside my directive, I've also tried element.html('<div ng-include src=\'enterprisesMenu.html\'></div>');

Any ideas?

Mohammad Sepahvand
  • 17,364
  • 22
  • 81
  • 122
  • Not 100% on topic, but your question sounds like you should read: http://stackoverflow.com/questions/14994391/how-do-i-think-in-angularjs-if-i-have-a-jquery-background – TheHippo Nov 25 '13 at 11:42
  • Thanks, yea I've already read that, kinda difficult integrating it into your practice though. What would be a more angular way of achieving this functionality in your opinion? – Mohammad Sepahvand Nov 25 '13 at 12:00

2 Answers2

5

Try $compile:

element.html($compile('<div ng-include=\'enterprisesMenu.html\'></div>')
(scope));
AlwaysALearner
  • 43,759
  • 9
  • 96
  • 78
  • 3
    Thanks that almost did the trick, but I had to put double quotes around the template, ended up like this: `element.html($compile('
    ')(scope));`     – Mohammad Sepahvand Nov 25 '13 at 11:58
2

You could achieve this result by dynamically ng-including the desired template. For instance:

HTML:

<div class="your-sidebar" ng-controller="SidebarCtrl">
    <div ng-include="sidebar.url" ></div>
</div>

Controller:

app.controller("SidebarCtrl", function($scope) {
    $scope.sidebar = {
        url: "initial-url"
    };
    $scope.$on("$routeChangeSuccess", function(event, current, previous) {
        // decide potentially new value for $scope.sidebar.url
        $scope.sidebar.url = newValueCalculatedAbove;
    });
});

This solution does not require a directive, only an extra controller. It can be done with directive too, the HTML above is the template of the directive and the JS code the controller (no link function required).

Nikos Paraskevopoulos
  • 39,514
  • 12
  • 85
  • 90
  • Thanks. Yea I was contemplating whether to use a controller or a directive, controller seemed simpler from the outset as well, but somehow I was under the impression directives are the way to go. Which approach is more angular? The directive or controller? – Mohammad Sepahvand Nov 25 '13 at 11:59
  • It doesn't really matter for this case, but I would go for the directive. See last paragraph of answer; the code is the same, you would only have to wrap it in a directive declaration. In any case I would avoid using `$compile` since there is a simpler alternative - the `ng-include` (but this is a personal opinion). – Nikos Paraskevopoulos Nov 25 '13 at 12:25