Angular.Js Bind Динамически загружаемый HTML

Question

Я обновляю DIV с содержимым страницы HTML, эта страница имеет угловой контроллер. когда DIV заполняется HTML, он не BIND с контроллером.

мой index.html

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

Содержание home.html который я загрузки с JQuery

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

И это то, что я звоню на index.html

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

Угловой не обновляет {{Hello}}, похоже, что он не привязан к загруженному html через jQuery.

Answer 1

Угловой не известно о ваших изменениях в jQuery. Вам нужно либо загрузить HTML через угловые и вызвать службу компиляции:

$compile(HTML)($scope); 

Или испускать событие и сказать Угловым скомпилировать. Я только что ответил на вопрос, похожий на этот вопрос на следующий день о том, как сделать угловым информацию об изменениях, сделанных с помощью jquery: AngularJS legacy integration and content that contains asynchronously changing id doesn't trigger watcher

Для дезинфекции вам необходимо добавить модуль ngSanitize в свой проект. Но я верю, что вы можете просто использовать сервис $ ScE сказать угловой не беспокоить дезинфицирующим, если вы доверяете

т.е.

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

Answer 2

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