$ targetDom.html (...). Scope ist keine Funktion

Question

Ich versuche, dynamischen HTML-Inhalt über AJAX zu laden, dann kompiliere es, weil es eckige Direktiven usign ein angularJS class enthält.

// 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) { 
    /**/ 
}); 

Aber ich habe diesen Fehler (see this codepen):

$targetDom.html(...).scope is not a function 

Answer 1

Verwenden angular.element($targetDom).scope(); statt $targetDom.html(htmlToCompile).scope();