Вызов функции при щелчке на включенном элементе внутри директивы AngularJS

0

Я написал модальную директиву, потому что хочу иметь пару модальных страниц. Я использовал этот учебник для достижения этого: http://adamalbrecht.com/2013/12/12/creating-a-simple-modal-dialog-directive-in-angular-js/

Для начала, вот мой код директивы, который почти такой же, как в предыдущем учебнике:

//here, app is an AngularJS module
app.directive('modal', function() {
    return {
        restrict: 'E',
        scope: {
            show: '='
        },
        replace: true,
        transclude: true,
        link: function(scope) {
            scope.hide = function() {
                scope.show = false;
                document.body.classList.remove('wwf-noScroll');
            };
        },
        template: '<div class="Modal" ng-show="show"><div class="Modal-overlay" ng-click="hide()"></div><button class="Modal-close" ng-click="hide()"></button><div class="Modal-content" ng-transclude></div></div>'
    };
});

Тогда вот как я его использую:

<modal show="showInformationsModal">
    <h2 class="Modal-title">Informations</h2>
    <button type="button">Close this</button>
</modal>

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

Я пробовал некоторые вещи вроде:

  • <button type="button" ng-click="hide()">Close this</button>
  • <button type="button" ng-click="showInformationsModal = false">Close this</button>
  • <button type="button" ng-click="show = false">Close this</button>

Ничего не получилось. Кажется, я что-то упускаю! Может кто-нибудь мне помочь?

Спасибо,

Сирил

  • 0
    Вы все еще можете поместить кнопку в шаблон вашего модала и просто скрыть ее, когда вы не хотите, чтобы она была закрыта таким образом, а также динамически генерировать текст, либо через атрибут, либо через некоторую логику в контроллере вашего мода. Разве это не сработает?
  • 0
    Можете ли вы модальный код в jsfiddle. Мы сможем помочь намного лучше ...
Показать ещё 1 комментарий
Теги:

1 ответ

1
Лучший ответ

РЕДАКТИРОВАТЬ

Как было указано в этом комментарии, функция transclude может быть более общей, заменив var contentElement = element[0].querySelector('.Modal-content'); с var contentElement = element[0].querySelector('[ng-transclude]');

ОРИГИНАЛ

Друг прислал мне эту ссылку: http://angular-tips.com/blog/2014/03/transclusion-and-scopes/

То, что мне не хватало, - это именно то, что указывает эта ссылка: transcluded HTML scope не является директивной изолированной областью.

Я использовал пятый параметр функции link:

transclude(scope, function(clone, scope) {
  var contentElement = element[0].querySelector('.Modal-content');
  contentElement.innerHTML = '';

  for (var i = 0; i < clone.length; ++i) {
    contentElement.appendChild(clone[i]);
  }
});

Вот код обновлен. Я не знаю, если это самый красивый способ решить мою проблему, но он решает это! http://codepen.io/JesmoDrazik/pen/NqZLYR?editors=001

  • 0
    Это работает. Angular действительно отстой для такого рода странностей. Вы можете сделать функцию немного более общей с помощью var contentElement = element [0] .querySelector ('[ng-transclude]');
  • 0
    Спасибо дружище, только что отредактировал ответ.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню