Replace the html of an element with the content of an external template in a directive?

Question

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?

Solution 1

Try $compile:

element.html($compile('<div ng-include=\'enterprisesMenu.html\'></div>')
(scope));   

Solution 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).

Comments

[Mohammad Sepahvand]

Thanks that almost did the trick, but I had to put double quotes around the template, ended up like this: element.html($compile('<div ng-include="\'enterprisesMenu.html\'"></div>')(scope));

[Mohammad Sepahvand]

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?

[Nikos Paraskevopoulos]

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).