директива атрибута не работает для загруженного элемента ajax? - PullRequest
Новая
       9

директива атрибута не работает для загруженного элемента ajax?

0 голосов
/ 31 октября 2018

Я имею дело с устаревшим кодом. Моя страница состоит из трех частичных представлений, одного для верхнего колонтитула, одного для нижнего колонтитула, одного для контента. У меня есть этот элемент с my-directive в моем нижнем колонтитуле: 

<a my-directive>
    <img>
</a>

Мой нижний колонтитул отображается одновременно с другими при загрузке страницы. Однако в моем заголовке у меня есть #products_menu, содержимое которого загружается через ajax: 

// calls a route to do some processing before returning the view
// to be rendered inside #products_menu
$('#products_menu').load(...);

#products_menu содержит тот же элемент с той же директивой: 

<a my-directive>
    <img>
</a>

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

angular
    .module('module1')
        .directive('myDirective', ['$rootScope', 'ModalService', '$compile',
            function($rootScope, ModalService, $compile) {
                return {
                    restrict: 'A',
                    link: function(scope, element, attrs) {
                        console.log(element);

                        element.on('click', function(e) {...}
                     } ...

Проблема в том, что когда я нажимаю на элемент в нижнем колонтитуле, он срабатывает. Но когда я нажимаю на элемент в заголовке, это не так. Я предполагаю, что это потому, что элемент был загружен динамически, и атрибут не был связан во время компиляции angular.

Я прав в своем предположении, и если да, есть ли обходной путь?

1 Ответ

0 голосов
/ 31 октября 2018

Так что простой вывод html с помощью jquery или DOM-манипуляций не будет слишком сложным для выполнения его работы. Вы должны сообщить об этом или лучше скомпилировать DOM, используя сервис $compile. Для этого шаблона автоматически запускаются угловые объекты 

$('#products_menu').load(..., function() {
   $compile($('#products_menu'))($scope);
})

Я бы рекомендовал смешивать jQuery с угловым, лучший способ справиться с этим угловым способом - использовать директиву ng-include 

<div id="products_menu" ng-include="'template.html'">
</div>
...