Унаследованная интеграция и контент AngularJS, содержащий асинхронно изменяющийся идентификатор, не вызывает наблюдателя

Question

У меня есть устаревшая страница, которая асинхронно заполняется JQuery (устаревшим кодом) после загрузки страницы в первый раз. На этой странице я пытаюсь получить директиву angularjs. Единственная проблема заключается в том, что я пытаюсь посмотреть значение #myId, поэтому я могу использовать его для своей директивы, но значение изменяется и запускает наблюдателя один раз, и оно пустое - это не повторится, когда на самом деле оно получает числовое значение из jquery , Что я делаю не так? Я пробовал с ng-value, ng-model, но все же я получаю undefined для этих попыток. Также не представляется возможным ввести маршрутизации и т.д., чтобы получить идентификатор оттуда .. Спасибо

Вот моя директива:

angular.module("myModule") 
.directive("myDir", function() { 
    return { 
     restrict: 'A', 
     templateUrl: "template.html", 
     scope : {}, 
     link: function (scope, element, attrs, ctrl) { 
      scope.$watch(function() { return $("#myId").val() }, function (newVal) { ctrl.myId= newVal}); 
     }, 
     controllerAs: 'myCtrl' 
    }; 

}); 

Answer 1

Угловые не знают об изменении Jquery (очевидно). Вы можете испускать данные в пользовательском событии в jQuery, фиксировать это событие в угловом и ретранслировать его в свою директиву, чтобы получить его в первый раз.

Вот plunkr с ним работать: http://plnkr.co/edit/RTIzEudC7TktDTSdqWnQ Он будет обновлять связывание на странице после того, как JQuery генерирует событие 5 секунд после загрузки страницы

//emit in jquery 
$(document).trigger('customEvent', data); 

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

//listen for it in directive 
scope.$on('customEvent', function(){ 
    scope.$apply(function(){ 
     //do stuff here and angular will be aware of it 
    }); 
});