Angular.Js绑定动态加载的HTML

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.

我正在使用HTML页面的内容更新DIV,该页面具有角度控制器。当DIV填充HTML时,它不与Controller绑定。

my index.html

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

Content of home.html which I am loading with jQuery

我用jQuery加载的home.html的内容

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

And this is what I am calling on index.html

这就是我在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.

Angular不会更新{{Hello}},它似乎没有通过jQuery绑定到加载的html。

2 个解决方案

#1

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

Angular并不知道你在jQuery中的变化。您需要通过angular加载html并调用编译服务:

$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

或者发出事件并告诉angular编译它。我刚刚回答了一个类似于此问题的问题,关于如何通过jquery进行角度感知:AngularJS遗留集成和包含异步更改id的内容不会触发观察者

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

要进行清理,您需要将ngSanitize模块添加到项目中。但我相信你可以使用$ sce服务告诉棱角分明,如果你相信它,就不要打扰消毒

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

#2

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

#1