29

I would like to change the ng-includes src with a variable. Currently this is what I have.

 <div class='alignRightCenter' id='rightContent'>
    <ng-include src="'{{view}}'"> </ng-include>
</div>

And here is the controller:

ctrl.controller('contentCtrl', ['$scope', function($scope) {
      $scope.view = "partials/setListName.tpl.html";
  }]);

Unfortunately I can not use a ng-view because it is already being used to get me to this page. Is it possible to make something like this work?

1
  • 4
    have you tried ng-src="{{view}}" ? Commented Feb 18, 2014 at 16:52

2 Answers 2

53

Try as follows:

<ng-include src="view"> </ng-include>

-----------------OR----------------------

You can do this way,

View:

<div data-ng-include data-ng-src="getPartial()"></div>

Controller:

function AppCtrl ($scope) {
  $scope.getPartial = function () {
      return 'partials/issues.html';
  }
}
Sign up to request clarification or add additional context in comments.

2 Comments

<div data-ng-include data-ng-src="getPartial()"></div> does not work for me. getPartial() isn't rised, but <ng-include src="getPartial()"></ng-include> works!
@Chaki_Black Try <div ng-include src="getPartial()"></div> instead of <div data-ng-include data-ng-src="getPartial()"></div>
11

Like this. You need to use single quotes and +, like you would in JavaScript.

<ng-include src="'/path/to/template'+ my.variable +'.html'"></ng-include>

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.