DOM'a bir html ekledikten sonra AngularJS denetleyicisini başlat

Question

Saf javascript'ten $ derlemesi nasıl kullanılır? Temel javascript'i ve Angular kullandığım yerleri ve bunun gibi bir şeyi nasıl yapamayacağımı bir şekilde bulamıyorum: http://jsfiddle.net/DavidSlavik/bFdcJ/1/

Sanırım $ derlemesi kullanmam gerekiyor, ancak herhangi bir kapsam yok.

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}]'); 

Answer 1

angular.bootstrap($("#targetElmForApp")[0], ["myApp"]); 

Açıklama:

angular.bootstrap(rootElementForApp, arrayOfModulesForTheApp) 

Birinci parametre aksi ng-app direktifini kullanarak ne yapardınız uygulaması için kök öğesi ayarlar.

İkinci parametre, uygulamayı tanımlayan modüllerin listesidir. Bu, uygulamanın tanımlandığı tek bir modüldür.

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

bkz: Bu yayından
http://docs.angularjs.org/api/angular.bootstrap
http://docs.angularjs.org/guide/bootstrap

Answer 2

Alternatif yol: AngularJS + JQuery : How to get dynamic content working in angularjs

 angular.element(document).injector().invoke(function ($compile) { 
       var container = $('#some-dom-element'); 
       var scope = angular.element(container).scope(); 
       $compile(container)(scope); 
     });