Angular.Js Bind Dynamically loaded HTML

Question

I am updating a DIV with the content of HTML page, that page has angular controller. when DIV is populated with the HTML, it does not BIND with Controller.

my index.html

<div id="mainDiv"> </div>

Content of home.html which I am loading with jQuery

<div ng-controller="BlogsController">
    {{Hello}}
</div>

And this is what I am calling on index.html

$().ready(function () {
    $("#mainDiv").load("pages/home.html");
})

Angular does not update the {{Hello}}, it seems like its not binding to loaded html via jQuery.

Community · Accepted Answer · 2017-05-23 11:44:19Z

2

Angular is not aware of your changes in jQuery. You need to either load the html through angular and call the compile service:

$compile(HTML)($scope);

Or emit the event and tell angular to compile it. I just answered a question similar to this the other day on how to make angular aware of changes made through jquery: AngularJS legacy integration and content that contains asynchronously changing id doesn't trigger watcher

To sanitize you need to add the ngSanitize module to your project. But I believe you can just use the $sce service to tell angular not to bother sanitizing if you trust it

i.e.

<div id="mainDiv" compile-directive></div>

$().ready(function () {
    $.get('pages/home.html', function(data){
        $(document).trigger('customEvent', [data]);  
    });
});

angular.module('test').run(['$rootScope', function ($rootScope) {
    //capture jQuery events and re-broadcast them as angular events
    //events to capture
    var events = [
        'customEvent'
    ];

    //To Use: $scope.$on('eventName', function(ngEvent, jqEvent, data)
    $(document).on(events.join(' '), function(e) {
        $rootScope.$broadcast.apply($rootScope, [e.type].concat(Array.prototype.slice.call(arguments, 0)));   
    });
});

angular.module('test').directive('compileDirective', function($compile, $sce){
    return{
        restrict: 'AE',
        link: function(scope, element, attrs){
            scope.$on('customEvent', function(ngEvent, jqEvent, data){
                scope.$apply(function(){
                    angular.element.append($compile($sce.trustAsHtml(data))(scope));
                });
            };
         }
     };
 });

edited May 23, 2017 at 11:44

CommunityBot

11 silver badge

answered May 29, 2015 at 23:28

Kevin F

2,8852 gold badges18 silver badges22 bronze badges

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

6 Comments

highwingers Over a year ago

I am doing this outside of angular JS, within a custom JS file. is it possible?

Kevin F Over a year ago

Updated answer, should give you a good idea of how to transfer your data from jQuery to angular and compile it within angular

highwingers Over a year ago

i am getting Argument 'fn' is not a function, got string

Kevin F Over a year ago

What line gives you that error? I updated the ajax call to what the documentation suggests for getting html api.jquery.com/jquery.get

highwingers Over a year ago

I got it to work, however its returning RAW HTML on page, can you tweak above code to allow unsafe HTML rendering?

|

Parthipan S · Accepted Answer · 2015-05-29 23:34:07Z

0

  var htmlcontent = $('#loadhtml ');
    htmlcontent.load('/Pages/Common/index.html')
    $compile(htmlcontent.contents())($scope);

answered May 29, 2015 at 23:34

Parthipan S

1809 bronze badges

2 Comments

highwingers Over a year ago

I get Uncaught ReferenceError: $compile is not defined

Parthipan S Over a year ago

add dependency injector in your controller

Collectives™ on Stack Overflow

Angular.Js Bind Dynamically loaded HTML

2 Answers 2

6 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related