Angularjs $compile使用示例

代碼如下：

var infographicModule = angular.module('infographicModule',[]); 
infographicModule.directive('bodyTextInfographic', ['$compile','$timeout','jsonService',function($compile,$timeout,jsonService) {

    return{
        restrict: 'C',
        
        link: function (scope, iElement, iAttrs) {
            var tempURL=scope.source['default'].href || scope.source['medium'].href || scope.source['small'].href;
            
            if(tempURL){
                
                var resultingElement = "<div class='infographic_iframe_container'>"+
                                            "<iframe onLoad='infoloadfun()' class='infographic_iframe' frameborder='0' scrolling='auto' src="+ tempURL +"></iframe>"+
                                        "</div>";
                
                
                var linkFn = $compile(resultingElement);
                var newElement = linkFn(scope);
                iElement.replaceWith(newElement); //這里的iElement也可以替換成頁面上的任意元素
            }
        }
    }

}]);

//另一使用示例：（iElement也可以替換成頁面上的任意元素）

var jqEle = floatMenuContentEl.find("."+viewName+"Pane");
var tplPath = HTML_RENDITION.documentsPath_version +'views/'+viewName+'Pane.html?ts=' + scope.timestamp;
var tpl = $compile("<div style='width:280px;' ng-include=\"'"+tplPath+"'\"></div>")(jqEle.scope());
jqEle.html(tpl);

相比傳統的template，$compile更為靈活