AngularJS модальный диалог не открывается

Это сводит меня с ума. Я возился с конвертированием сайта в AngularJS около года назад. Я добрался до пригодного для жизни состояния, хотя немного липкий. Я пытаюсь добавить новую страницу, которая будет использовать модальный диалог. У меня есть код с модальными диалогами, которые работают. По какой-то причине этого нет. Я нахожу отсутствие отладочной информации в консоли, очень раздражающей. Anywho, я надеюсь, что я просто что-то пропустил. Я отключил кишки контроллера ... и HTML для этого факта, поскольку для этого не требуется ничего.AngularJS модальный диалог не открывается

Признак: Я ударил «Create Alert», и ничего не происходит. Вы можете сами увидеть страницу here.

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-sanitize.min.js"></script> 
<script> 

angular.module('myApp', ['ngSanitize']) 
.controller("alertController", ['$scope','$http','$sce','$location', function($scope,$http,$sce,$location) { 
    $scope.data = "Hello World"; 
}]); 

</script> 
</head> 
<body> 

<div class="parent_column" style="min-width: 700px; max-width: 700px; margin: 50px auto;" data-ng-app="myApp" data-ng-controller="alertController"> 
{{data}} 
      <span id="openModal" class="modalDialog" style="padding: 3px;"> 
       <div style="width: 250px;"> 
        Modal! 
        <a href="#close" title="Close" class="close">X</a> 
       </div> 
      </span> 

     <div class="ggButton" style="line-height: 135%;"><a href="#openModal">Create Alert</a></div> 

</div>

источник

2015-09-12 kiss-o-matic

Вы не ссылочного любые JavaScript рамки, которые обеспечивают модальный диалог функциональность (например, JQuery UI или Bootstrap), а также текущий код не имеет никакой логики, чтобы скрыть или показать модальный диалог. Можете ли вы увидеть какие-либо файлы javascript в своем проекте, которые могут потребоваться как часть решения? – ProgrammerGuy

Хорошо, мой рабочий пример имеет jquery в нем и еще один js-файл с логикой для отображения всплывающего окна. Этого нет. Я обновил файл bad_popup.html с помощью сценария JQuery и csspopup.js, но он все еще не работает. Он возвращается ко мне, но все еще не уверен, что случилось. BTW, рабочий пример на том же сервере находится по адресу http://www.gamengai.com/popup.html –

Однако, глядя на различия в bad_popup.html и popup.html, можно увидеть, что версии angularjs разные. Если я изменю bad_popup, чтобы использовать версию 1.3.0-rc.5 вместо 1.2.25, модальная часть работает (хотя я получаю ошибку внедрения. Причина в том, что я использовал более позднюю версию (хотя я не могу вспомнить, почему). Кодекс построен вокруг этого, так что, очевидно, я бы хотел, чтобы это работало. –

служба $ местоположение меняется URL для: http://www.gamengai.com/bad_popup.html#/openModal

Но нужен JQuery UI: http://www.gamengai.com/bad_popup.html#openModal

Настройка службы $ место, чтобы не использовать режим hashbang :

angular.module('myApp', []) 
.config(function($locationProvider) { 
    $locationProvider.html5Mode({ 
     enabled: true, 
     requireBase: false 
    }); 
    $locationProvider.hashPrefix('!'); 
}) 
.controller("alertController", ['$scope','$http','$sce', '$location',   
function($scope,$http,$sce, $location) { 
    $scope.data = "Hello World"; 
}]);

«$ location service имеет два режима конфигурации, которые управляют форматом URL-адреса в адресной строке браузера: режим Hashbang (по умолчанию) и режим HTML5, основанный на использовании API истории HTML5. Приложения используют один и тот же API в обоих режимах и сервиса $ месте будет работать с соответствующими сегментами URL и API для браузера, чтобы облегчить изменение браузера URL и управление историей «.

https://code.angularjs.org/1.2.25/docs/guide/ $ расположение

Или, если вы этого не сделаете нужна услуга определения местоположения, можно просто удалить $ местоположения из приложения:

angular.module('myApp',[]) 
.controller("alertController", ['$scope','$http','$sce', function ($scope,$http,$sce) { 
    $scope.data = "Hello World"; 
}]);

Больше информации здесь: https://code.angularjs.org/1.2.25/docs/guide/ $ расположения

Изменения шумихи rlinks от HREF до нг-HREF:

<a ng-href="#close" title="Close" class="close">X</a> 
<a ng-href="#openModal">Create Alert</a>

источник

2015-09-13 00:38:09 ProgrammerGuy

@ Kiss-O-Matic, я перезагружаю bad_popup.html (шпионить за вами по мере исправления проблемы), изменить angular.module ('myApp ') на angular.module (' myApp ', []), чтобы исправить эту ошибку «Ошибка нечистоты: [$ инжектор: номод] http://errors.angularjs.org/1.3.0-rc.5/$injector/nomod «p0 = myApp» – ProgrammerGuy

ОК - это исправление. Появляется модальный диалог. Проблема в том, что в самом коде я считаю, что мне нужно дезинфицировать. Если вы посмотрите на bad_popup.html, вы заметите, что {{data} } больше не интерпретируется.: -/ –

Ха-ха - ты быстро. Хорошо, я сделал это изменение, но теперь модальный диалог снова разоряется. –

AngularJS модальный диалог не открывается

ответ

Смежные вопросы