在DOM中添加一些html后初始化AngularJS控制器

在DOM中添加一些html后初始化AngularJS控制器,angularjs,Angularjs,有没有办法从纯javascript使用$compile?我将基本javascript和我使用Angular的地方结合起来,但找不到一种方法来做这样的事情: 我想我需要使用$compile,但从没有任何作用域的地方开始 angular.module('myApp', []); function ExpensesCtrl($scope) { // Here are some master functions... } $(function () { // H

有没有办法从纯javascript使用$compile?我将基本javascript和我使用Angular的地方结合起来,但找不到一种方法来做这样的事情:

我想我需要使用$compile,但从没有任何作用域的地方开始

angular.module('myApp', []);

function ExpensesCtrl($scope) {

    // Here are some master functions...    

}    


$(function () {

   // Here is the Ajax function that returns html from my MVC action processed with Razor
   // Here I'm not using AngularJS and scopes...
   var htmlFromAjax = '<div id="mapOrder" ng-controller="sortable"><div ng-repeat="item in SortItems">{{item.Title}}</div></div>';
   $('body').append(htmlFromAjax);

});

function sortable($scope, $http, $element) {

    // Here is the Ajax function that return JSON object. For example it is commented and used static variable SortItems in scope.
    //$http.get('someUrlWitchReturnsJsonObject')
    //    .success(function (e) {
    //        $scope.SortItems = e;
    //    });

    $scope.SortItems = JSON.parse('[{"Title":"ddddddd","MapId":5,"Order":0},{"Title":"Moje mapa","MapId":3,"Order":2},{"Title":"asdas","MapId":4,"Order":3},{"Title":"asds","MapId":7,"Order":4},{"Title":"Pokus","MapId":8,"Order":5},{"Title":"Hello world!!!","MapId":1,"Order":10}]');
angular.module('myApp',[]);
功能费用成本成本(范围){
//这里有一些主函数。。。
}    
$(函数(){
//下面是一个Ajax函数,它从使用Razor处理的MVC操作返回html
//这里我没有使用AngularJS和scopes。。。
var htmlFromAjax='{{item.Title}}';
$('body').append(htmlFromAjax);
});
函数可排序($scope、$http、$element){
//下面是返回JSON对象的Ajax函数。例如,它在作用域中被注释并使用静态变量SortItems。
//$http.get('someUrlWitchReturnsJsonObject')
//.成功(职能(e){
//$scope.SortItems=e;
//    });
$scope.SortItems=JSON.parse(“[{”Title:“ddddddd”,“MapId”:5,“Order”:0},{”Title:“Moje mapa”,“MapId”:3,“Order”:2},{”Title:“asdas”,“MapId”:4,“Order”:3},{”Title:“asds”,“MapId”:7,“Order”:4},{”Title:“Order”:5},{”Title:“Hello world!!!”,“MapId”:1,“Order”:10});
说明:

angular.bootstrap(rootElementForApp, arrayOfModulesForTheApp)
第一个参数设置应用程序的根元素,否则将使用
ng app
指令

第二个参数是定义应用程序的模块列表。这通常是定义应用程序的单个模块

因此,我们所做的与:

<div id="targetElmForApp" ng-app="myApp"></div>

请参阅:


本帖的替代方法:


救了我的命!Tesekkuller Dostam!:)我在stackoverflow上搜索了一个小时的无用答案后发现了这个。谢谢!注意:这对我来说很有效,但我必须调用scope。最后调用$apply()以使一切100%正常工作。
<div id="targetElmForApp" ng-app="myApp"></div>
        angular.element(document).injector().invoke(function ($compile) {
                var container = $('#some-dom-element');
                var scope = angular.element(container).scope();
                $compile(container)(scope);
        });