Использование ng-if в пользовательском шаблоне директивы вызывает проблемы с привязкой события изменения размера к элементу - PullRequest
Новая
       22

Использование ng-if в пользовательском шаблоне директивы вызывает проблемы с привязкой события изменения размера к элементу

0 голосов
/ 12 февраля 2019

Я помещаю свою директиву Pop-UP (т.е. всплывающее окно) несколько раз на странице.Всплывающее окно появляется только в том случае, если значение ng-if равно true, отправляется как параметр атрибута, но функция изменения размера jQuery не привязана к элементу в функции ссылки директивы.

Это мой первыйстрока HTML в моей директиве 

<div  class='ng-modal' id='Modal1' ng-if='show'>

Когда я нажимаю кнопку, show имеет значение true, всплывающее окно появляется в пользовательском интерфейсе, но 

$('#ModalDialog').resizable()

не срабатывает,Хотя, если я сделаю что-то подобное 

$timeout(function () {$('#Modal1').resizable() }, 1000);

, то все будет работать нормально, но функция $timeout не разрешена в моем коде.Каков будет правильный способ сделать это?

Мой вывод: проблема возникает только тогда, когда директива помещается на страницу несколько раз, один вызов с ng-show не вызывает проблем.

1 Ответ

0 голосов
/ 12 февраля 2019

Поскольку JQuery опирается на существующие элементы DOM, во время выполнения 

$('#ModalDialog').resizable()

элемент с "#ModalDialog" может или не может существовать.Я не знаком с JQuery resizable, но когда вам нужно применить JQuery к элементам в angular, лучше всего создать директиву и работать с DOM в функции link .Это обеспечит правильное применение неуглового поведения к элементу. 

.directive('uiResizable', function() {
return {
    restrict: 'A',
    scope: ...,
    templateUrl: ...,
    link: function(scope, element, attrs) {
        element.resizable();
    }
  };
});

И применение JQuery с изменяемым размером к элементу: 

<div id="#ModalDialog" ui-resizable ng-if ...>

Надеюсь, это поможет вам.

...