using directive in ng-bind-html

Question

Im trying to call a directive to change view based on my tab click.

My directive:

Proj.directive('tab1', function() {
    return {
        restrict:'E',
        templateUrl:'partials/overviewPage.html'
    };
});

and my controller:

$scope.selectTab = function(tab){
        if(tab == 'something'){
            $scope.content = '<tab1></tab1>';
        }
    }

and the div Im trying to change

<div ng-bind-html="content"></div>

Im trying to click on tab to show overviewPage.html page. But its not working properly.

Any suggestion, as I have just started with angularjs

Thanks.

score 1 · Answer 1 · answered Feb 12 '14 at 09:20

This won't work, ng-bind-html will just insert HTML into the DOM tree without triggering AngularJS directives to be processed.

If you want to insert "live" HTML into the DOM, where all the directives are "live" you would have to compile it first (http://docs.angularjs.org/api/ng.$compile) and then attach to the DOM tree. This is usually done in a directive.

using directive in ng-bind-html

1 Answers1

Linked