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.

score 2 · Accepted Answer · edited May 23 '17 at 11:44

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

I am doing this outside of angular JS, within a custom JS file. is it possible? — highwingers, May 29 '15 at 23:30
Updated answer, should give you a good idea of how to transfer your data from jQuery to angular and compile it within angular — Kevin F, May 29 '15 at 23:37
What line gives you that error? I updated the ajax call to what the documentation suggests for getting html https://api.jquery.com/jquery.get/ — Kevin F, May 29 '15 at 23:58
I got it to work, however its returning RAW HTML on page, can you tweak above code to allow unsafe HTML rendering? — highwingers, May 30 '15 at 00:13
updated with $sce service. I don't have a ton of experience with this, so you might need to check a guide like this: http://odetocode.com/blogs/scott/archive/2014/09/10/a-journey-with-trusted-html-in-angularjs.aspx to get the last step figured out — Kevin F, May 30 '15 at 00:20

score 0 · Answer 2 · answered May 29 '15 at 23:34

0

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

answered May 29 '15 at 23:34

Parthipan S

180
9

I get Uncaught ReferenceError: $compile is not defined – highwingers May 29 '15 at 23:35
add dependency injector in your controller – Parthipan S May 30 '15 at 00:42

Angular.Js Bind Dynamically loaded HTML

2 Answers2