在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.

Answer 1

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.