Inicjalizuj kontroler AngularJS po dołączeniu jakiegoś html do DOM

Question

Czy istnieje sposób użycia $ compile z czystego javascript? Łączę podstawowy javascript z miejscami, w których używam Angulara i nie mogę znaleźć sposobu na zrobienie czegoś takiego: http://jsfiddle.net/DavidSlavik/bFdcJ/1/

Myślę, że potrzebuję użyć $ compile, ale z miejsca, gdzie nie ma żadnego zakresu.

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"]); 

Objaśnienie:

angular.bootstrap(rootElementForApp, arrayOfModulesForTheApp) 

Pierwszy parametr ustawia element główny dla aplikacji, która jest, co można zrobić za pomocą dyrektywy ng-app inaczej.

Drugie parametry to lista modułów definiujących aplikację. Zazwyczaj jest to pojedynczy moduł, w którym zdefiniowana jest aplikacja.

Więc co zrobiliśmy to samo, co:

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

patrz:
http://docs.angularjs.org/api/angular.bootstrap
http://docs.angularjs.org/guide/bootstrap

Answer 2

alternatywna droga z tego postu: 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); 
     });