javascript - $targetDom.html(...).scope 不是函数

Question

我正在尝试通过 AJAX 加载动态 HTML 内容，然后编译它，因为它包含使用 angularJS class 的 Angular Directive(指令).

// 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

Answer 1

使用angular.element($targetDom).scope();代替$targetDom.html(htmlToCompile).scope();