Обновить директиву angularjs после загрузки страницы ajax?

Question

Мой основной HTML, как:

На домашней странице, я нажимаю, чтобы перейти на другую страницу, которая просто меняет содержание #page_content с помощью JQuery, короче говоря что-то вроде:

gl.prototype.pageNav = function(page) { 
    $.ajax({ 
     url: page, 
     success: function (data) { 
      $('#page_content').html(data); 
     } 
    }); 
} 

На одной подстранице, у меня есть угловая директива используется:

<div id="awesomeSubPage" ng-my-sub-directive></div> 

Однако, кажется, что директива не дозвонилась после Аякса навигации по страницам, его действительно дозвонились, если я иду прямо на страницу, как: site.com/myApp/awesomeSubPage

Код для директивы:

myApp.controller('ContentCtrl', function($scope) { 
    // commented out 
}.directive('ngMySubDirective', function() { 
    return { 
     link: function(scope, elem, attrs) { 
      elem.on('load', function() { 
       console.log('Run ngMySubDirective postMessage'); 
      }); 
     } 
    } 
}); 

Любые идеи?

Answer 1

Есть ли конкретная причина, по которой вы используете jQuery для изменения содержимого? Если вы создаете приложение AngularJs, вы можете просто использовать модуль маршрутизации Angularjs для отображения другого вида.

Причина, по которой директива не работает в вашем случае, заключается в том, что с помощью jQuery вы находитесь за пределами «Углового мира». Поэтому Angular не знает, что контент изменился. Вы можете позвонить $scope.$apply, если вам действительно нужно. Вы также можете просто заменить этот вызов $.ajax с вызовом с использованием $http как упомянуто here