Initialize AngularJS controller after append some html into DOM

Question

Is there a way how to use $compile from pure javascript? I'm combinating basic javascript and places where I'm using Angular and can't find a way how to do something like this: http://jsfiddle.net/DavidSlavik/bFdcJ/1/

I think I need use $compile but from place where is no any scope.

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

JFK · Accepted Answer · 2015-06-18 23:23:03Z

9

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

Explanation:

angular.bootstrap(rootElementForApp, arrayOfModulesForTheApp)

The first parameter sets the root element for the app, which is what you would do by using ng-app directive otherwise.

The second parameters is a list of modules that defines the application. This is typically a single module in which the app is defined.

So what we did is the same as:

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

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

edited Jun 18, 2015 at 23:23

JFK

41.2k31 gold badges138 silver badges314 bronze badges

answered Mar 6, 2013 at 13:39

Umur Kontacı

35.5k8 gold badges76 silver badges96 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Teoman shipahi Over a year ago

saved my life! Tesekkurler dostum! :)

Aldekein Over a year ago

I found this after an hour of searching through useless answers on stackoverflow. Thank you!

Community · Accepted Answer · 2017-05-23 12:01:58Z

0

Alternative way from this post: 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);
        });

edited May 23, 2017 at 12:01

CommunityBot

11 silver badge

answered Jul 25, 2014 at 11:50

David Slavík

1,1921 gold badge15 silver badges24 bronze badges

1 Comment

Vaughan Hilts Over a year ago

Note: This worked for me but I had to call scope.$apply() at the very end to get everything working 100%.

Collectives™ on Stack Overflow

Initialize AngularJS controller after append some html into DOM

2 Answers 2

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related