I am new to AngularJS. I am trying to use the ng-include directive dynamically but it does not work. For example
var template = '<div ng-include="/app/partials/HtmlPage.html"></div>'
Add a comment
|
2 Answers
from the Angular docs:
If the source is a string constant, make sure you wrap it in quotes, e.g. src="'myPartialTemplate.html'".
Try adding those inner quotes to your string template name.
var template = '<div ng-include="\'/app/partials/HtmlPage.html\'"></div>'
(notice you have to escape your inner quotes since you're already in a string)
1 Comment
Pinal Dave
Thanks Spencer, it works... I spent almost a day for this.. Thank you guys.
You should show more of your code. I have a directive that I'm using to dynamically load and use different templates using an ng-include in the template of my directive. Seeing as how this works I can't imagine what you would be doing that would be causing the ng-include not to work. Have you checked the inspector or whatever to see that it loads your HTMLPage.html or gets a 404?
directive("dynamicFormInput", ['$http', '$templateCache', function($http, $templateCache){
return {
restrict: 'E',
scope: {model: '=', section: '='},
template: '<ng:include src="tpl"></ng:include>',
link: function(scope, iElement, iAttrs) {
switch(scope.section.sectionTypeId)
{
case 1:
$http.get('partials/survey/textInput.html', {cache:$templateCache});
scope.tpl="partials/survey/textInput.html";
break;
case 2:
$http.get('partials/survey/selectOneOption.html', {cache:$templateCache});
scope.tpl="partials/survey/selectOneOption.html";
break;
case 3:
$http.get('partials/survey/multiSelectOption.html', {cache:$templateCache});
scope.tpl="partials/survey/multiSelectOption.html";
break;
case 4:
$http.get('partials/survey/boolean.html', {cache:$templateCache});
scope.tpl="partials/survey/boolean.html";
break;
case 5:
$http.get('partials/survey/multiSelectOption.html', {cache:$templateCache});
scope.tpl="partials/survey/multiSelectOption.html";
break;
case 6:
if(scope.section.sectionId == 19){
$http.get('partials/survey/addressSelection.html', {cache:$templateCache});
scope.tpl="partials/survey/addressSelection.html";
}
break;
}
}
}
}])
4 Comments
Pinal Dave
Thanks for your quick response. I appreciate it. Actually I have lot of complex code so I didn't show it, but I am also trying to dynamically create a template like you. This code works : <div data-ng-include="'/app/partials/HtmlPage.html'" />, but if I assign entire container DIV to some variable so that I can use it dynamically, for example : var template = '<div ng-include="/app/partials/HtmlPage.html"></div>' then it doesn't work.
shaunhusain
@user2584596 not sure what to tell ya, I'm doing the same thing above and it works, the only thing that seems like it could be awry is that the template var is not in scope. scope.tpl="partials/survey/boolean.html"; or perhaps your problem is with how you're trying to make it a template, since I'm using the template of a directive it gets processed by angular for parse/compile/link.
Pinal Dave
ng-include accepts an expression, so this works: <div ng-include src= " ' page.html ' "></div>, but in dynamic html way, I guess I am not enclosing path in proper quotes, so this one doesn't work : var template = '<div ng-include="/app/partials/HtmlPage.html"></div>' . I tried doing various string combinations like : "''" or '""' or "" "", but nothing works
shaunhusain
@user2584596 if you create a jsfiddle or plunkr to show the issue that would help, you can include templates in script blocks for the sake of testing docs.angularjs.org/api/ng.directive:script