dynamic routing AngularJS

Question

I am trying to bind a route property to the src for ng-include:

config.js

$routeProvider.when('/services', {
  templatePATH: '/views/services.html'
});

index.html

<html lang="en" ng-app="myApp" ng-controller="AppController">
<body>
<div ng-include src="{{page}}" class="container"></div>
</body>
</html>

controllers.js

controller('AppController', ['$scope','$route','$routeParams', function($scope, $route, $routeParams) {
  var render = function(){
    $scope.page = $route.current.templatePATH;
  };

  $scope.$on("$routeChangeSuccess",function( $currentRoute, $previousRoute ){
    render();
  });

}]).

Here's where I got the idea. What is strange is that the value of templateURL can be seen in the DOM on pageload where src is injected from the ng-include directive. Sadly however, this is not working.

Is it possible to achieve this kind of convention?

could you please share fiddle demo or provide more detail on question — Ajay Singh Beniwal
– Ajay Singh Beniwal, Commented Jun 13, 2013 at 17:54

Ajay Singh Beniwal · Accepted Answer · 2013-06-13 18:41:44Z

1

Oh your are just making a very small mistake please change your code to below

<div ng-include="page"  class="container"></div>

More Detailed Answer : When you use ng-include directive a watch is put on srcExp which is value of attr.ngInclude || attr.src so if you do {{page}} then you will be watching on the value of page not on page property so you have to put "page" without interpolated value so that it can watch directly on page instead of page string value

edited Jun 13, 2013 at 18:41

answered Jun 13, 2013 at 18:30

Ajay Singh Beniwal

19k11 gold badges84 silver badges100 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Dan Kanze Over a year ago

Thanks, what a dumb mistake haha. I have a follow up to this you can also take a stab at here: stackoverflow.com/questions/17095989/…

Collectives™ on Stack Overflow

dynamic routing AngularJS

1 Answer 1

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Linked

Related