CODEWITHSUNDEEP
angularjs
Pinal Dave
Pinal Dave

Reputation: 533

AngularJS : ng-include not working inside dynamic html

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>'

Upvotes: 3

Views: 7644

Answers (2)

Spencer
Spencer

Reputation: 2245

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)

Upvotes: 15

shaunhusain
shaunhusain

Reputation: 19748

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;
            }
        }
    }
}])

Upvotes: 0

Related Questions