Using $routeProvider for dynamic routing and compiling angular code

Question

this has been bugging me for days and i can't figure this out. i have a website that adds articles at certain points so i figured i shouldn't need to change the routing every time i add a page. so i added this to my project:

 $routeProvider.when ('/pages/:page', { templateUrl: 'page.html', controller: 'pageCtrl' });

then i use this for the pageCtrl:

 app.controller('pageCtrl', function ($scope, $http, $q, $routeParams, $sce, $location) {
  $http.get("partials/" + $routeParams.page + ".html")
  .then(function(ret) {
    $scope.content = $sce.trustAsHtml(ret.data);
  }, function(err) {
    $location.path("/404")
  });
 });

then in the webpage i put a

 <div ng-view ng-bind-html="content">{{content}}</div> 

and all works well except when i put angular code in there. it seems that it will only parse regular html code but not the ng-stuff. i think i should put a $compile in there somewhere. but i tried all combinations i could think of but none work.

things i tried:

 $scope.content = $compile($sce.trustAsHtml(ret.data))($scope);

 var e=angular.element($sce.trustAsHtml(ret.data));
 c=$compile(e);
 $scope.content = c;
 c($scope);

and several others that didnt do anything at all..

what's the right way to add content in a view and have angular directive work properly?

Answer 1

This should work well with ng-include within your page.html template:

page.html:

<h1>Page {{name}}</h1>
<div ng-include="contentUrl"></div>

Then your pageCtrl can set these to:

app.controller("pageCtrl", function($scope, $routeParams){
  $scope.name = $routeParams.page;
  $scope.contentUrl = $routeParams.page + ".html";
})

Here's a working plunker