Initialize controller after appending DOM into a html using jquery

Question

I am using jquery to append html in DOM. This html contains angular syntax which has controller and its variable binding. But once the html is appended, the variables initialized inside the controller does not populate their values instead it gets printed as {{ greeting }}.

JS:

$("#clickDiv").click(function(){
    var htmlStr = "<div ng-app='myapp'>"+
        "<div ng-controller='mainController'>"+
            "<div>{{ greeting.text }}</div>"+
            "<div>{{ val }}</div>"+
        "</div>"+
    "</div>";
    $("#right").html($compile(htmlStr));

});

var app = angular.module("myapp", []);
app.controller('mainController', ['$scope', '$compile', function($scope, $compile) {
    $scope.greeting = { text: 'Hello' };
    $scope.val = 123;
}]);

In the above code I am getting error - $compile is not defined.

JSFIDDLE: http://jsfiddle.net/ashwyn/7v6t6cqm/

Community · Accepted Answer · 2017-05-23 12:03:50Z

1

For lazily loading angular app you should angular.bootstrap instead of ng-app

$("#clickDiv").click(function(){
    var htmlStr = "<div id='myApp'>"+
        "<div ng-controller='mainController'>"+
            "<div>{{ greeting.text }}</div>"+
            "<div>{{ val }}</div>"+
        "</div>"+
    "</div>";
    $('#right').html(htmlStr)
    angular.bootstrap($('#myApp'), ['myapp'])
});

Look at this answer too will give you brief idea about it.

Fiddle

edited May 23, 2017 at 12:03

CommunityBot

11 silver badge

answered Oct 27, 2015 at 6:43

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

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

Collectives™ on Stack Overflow

Initialize controller after appending DOM into a html using jquery

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related