0
AJAXで動的HTMLコンテンツをロードしようとしていますが、angularJS classを使用して角度指示が含まれているため、コンパイルしています。
// Class
var AngularHelper = (function() {
var AngularHelper = function() { };
var defaultApplicationName = "MyApp";
/**
* Compile : Compile html with the rootScope of an application
* and replace the content of a target element with the compiled html
* @$targetDom : The dom in which the compiled html should be placed
* @htmlToCompile : The html to compile using angular
* @applicationName : (Optionnal) The name of the application (use the default one if empty)
*/
AngularHelper.Compile = function ($targetDom, htmlToCompile, applicationName) {
var $injector = angular.injector(["ng", applicationName || defaultApplicationName]);
$injector.invoke(["$compile", "$rootScope", function ($compile, $rootScope) {
//Get the scope of the target, use the rootScope if it does not exists
var $scope = $targetDom.html(htmlToCompile).scope();
$compile($targetDom)($scope || $rootScope);
$rootScope.$digest();
}]);
}
return AngularHelper;
})();
// jQuery
$(document).ready(function(){
$.get("http://fuiba.com/test/index.html", function(data) {
$("#result").html(data);
AngularHelper.Compile($("#result"), data);
});
});
// Angular
angular.module('MyApp',[]).controller('AppCtrl', function ($scope) {
/**/
});
しかし、私はこのエラー(see this codepen)を取得:
$targetDom.html(...).scope is not a function
なぜ要素の上に指定されたHTMLをロードするために、 'NG-include'ディレクティブを使用していませんか? –