Загрузить js-скрипт или js-код динамически в угловом

Question

Я хочу загрузить динамический контент через угловые (HTML, CSS, JS). Я использую директиву для динамического загрузки HTML.

app.directive("bindCompiledHtml", function($compile, $timeout) { 
    return { 
    template: '<div></div>', 
    scope: { 
     rawHtml: '=bindCompiledHtml' 
    }, 
    link: function(scope, elem, attrs) { 
     scope.$watch('rawHtml', function(value) { 
     if (!value) return; 
     // we want to use the scope OUTSIDE of this directive 
     // (which itself is an isolate scope). 
     var newElem = $compile(value)(scope.$parent); 
     elem.contents().remove(); 
     elem.append(newElem); 
     }); 
    } 
    }; 
}); 



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

Если контент содержит только HTML, он отображает его успешно, но если он содержит CSS/Script, это не так.

Вышеуказанная директива не отображает этот ниже код.

'<link rel="stylesheet" href="/static/engine/css/jquery.bxslider.less"><script src="/static/engine/js/jquery.bxslider.js"></script><style></style><script type="text/javascript">function mytest(){$(\'.bxslider\').bxSlider(); }</script><ul class="bxslider"><li ng-repeat=\'brainfact in brainfacts\'><img src="{$ brainfact.content[\'image\'] $}" /></li></ul>' 

Окажу это ниже код:

'<ul class="bxslider"><li ng-repeat=\'brainfact in brainfacts\'><img src="{$ brainfact.content[\'image\'] $}" /></li></ul>' 

демо plunker - http://plnkr.co/edit/QG5IbaNfhNDrIyRbXEGx?p=preview

Answer 1

Я установил свой образец here.

var app = angular.module('plunker', []); 

app.controller('MainCtrl', function($scope) { 
    $scope.brainfactTabData = '<script type="text/javascript" >alert(new Date());</script><div></div><script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script><span>working</span>' 

}); 

app.directive("bindCompiledHtml", function($compile, $timeout, $sce) { 
    return { 
    template: '<div ng-bind-html="content"></div>', 
    scope: { 
     rawHtml: '=bindCompiledHtml' 
    }, 
    link: function(scope, elem, attrs) { 
     scope.$watch('rawHtml', function(value) { 
     if (!value) return; 

     elem.html(value); 

     $compile(elem.contents())(scope.$parent); 
     }); 
    } 
    }; 
});