Угловая директива используется дважды, переопределяющий элемент

Question

Я пытаюсь написать простую директиву для модалов, чтобы закрыть их, когда я отправлю форму внутри них.

У меня есть 2 модальности: Loginmodal и регистрация модальные, соответственно упорядоченные в моем html.

модальности находится внутри modals.html, который называется с нг-включить внутри HTML-файл, который также называется в нг-включает в себя, таким образом, мы имеем здесь childscope из childscope в

Моей директивы

.

directive('myModal', function() { 
    return { 
     restrict: 'A', 
     scope : { }, 
     link: function(scope, element, attr) { 
      scope.$parent.$parent.$parent.dismiss = function() { 
       console.log(element.hasClass('in')); //returns false 
       element.modal('hide');// doesn't work because element is always the second modal 
       }; 
      $(element).bind('shown.bs.modal', function() { 
       if (!scope.$$phase && !scope.$root.$$phase) 
        scope.$parent.$parent.$parent.$apply(); 
       }); 
      } 
     }; 
}); 

Я не знаю, почему элемент внутри link является переопределение последним элементом?

Я применяю мою модальную директиву для обоих моих модалов, но я открываю первый.

Любая помощь будет очень ценится

Answer 1

Вы уверены, что scope.$parent.$parent.$parent отличается от своих двух модальностей? Если они имеют один и тот же grand-old-parent, то только последний будет фактически определять, что это за функция grandOldParent.dismiss.

Честно говоря, я немного в ужасе, когда вижу это scope.$parent.$parent.$parent вещь. В любом случае рекомендуется избегать использования $parent, так что цепочки 3 из них еще более сумасшедшие.

Вам действительно нужен отдельный объем (scope: {}), если на самом деле вы управляете его верхними родителями? Почему бы не использовать унаследованную область?

Возможно, существует более чистый способ борьбы с этими областями. Вы используете, или вы посмотрели на https://angular-ui.github.io/bootstrap/, где модалы угловаты, используя службу $modal, на которой вы определяете шаблон и контроллер?

Кроме того, это бесполезно:

if (!scope.$$phase && !scope.$root.$$phase) 
    scope.$parent.$parent.$parent.$apply(); 
}); 

И следует заменить

if (!scope.$root.$$phase) { 
    scope.$apply(); 
} 

(или просто scope.$apply, если это событие является асинхронным, так и вне Угловая дайджеста цикла).

быть также известно, что scope.$apply делает фактически $rootScope.$digest так Безразлично не вопрос, который вы сфера применения $.

UPDATE: Что вы можете сделать, это добавить ng-click="close" в вашей директиве HTML, а также добавить, что в его функции связи:

scope.close = function() { 
    // do stuff on this directive instance 
    console.log(element.hasClass('in')); 

    // close the modal 
    var parent = scope; 
    while (!parent.dismiss) { parent = parent.$parent; } 
    parent.dismiss(); 
} 

Таким образом, каждый экземпляр вашей директивы имеет свою собственную close функцию (так не переопределяет какой-либо другой), но по-прежнему вызывает уникальный dismiss, который принадлежит к одному модальному экземпляру каждого экземпляра.