2014-09-20 10 views
6

Jego modalny otwór załadunkowy, a także określony szablon ładowania. Ale niczego nie pokazuje.ui.bootstrap modal ładowanie html, ale nie pokazano niczego

Zapoznaj się z demo tutaj: http://demo.hupp.in/food-admin

Idź do [Produkty] i Search EnegiKcal> = 3500. Następnie kliknij zarządzać. Zostanie otwarte okno podręczne, ale zawartość szablonu nie zostanie załadowana.

Zauważyłem także, że czasami zwraca ona szablon HTTP 304.

ten sposób otworzyć modalnego:

/** Open Modal For add edit tags */ 
$scope.open = function (productId) { 

    var modalInstance = $modal.open({ 
     templateUrl: 'views/some.html', 
     controller: tagsModalInstanceCtrl, 
     size: 'lg' 
    }); 

    modalInstance.result.then(function (msg) { 

    }, function() { 
     // $log.info('Modal dismissed at: ' + new Date()); 
    }); 

}; 

var tagsModalInstanceCtrl = function ($scope, $modalInstance) { 

    $scope.ok = function() { 
     $modalInstance.close("hi"); 
    }; 

    $scope.cancel = function() { 
     $modalInstance.dismiss('cancel'); 
    }; 
}; 

Oto kod szablonu:

<div class="modal-header"> 
    <h3 class="modal-title">I'm a modal!</h3> 
</div> 
<div class="modal-body"> 
    <h3>Well, Hello there!</h3> 
</div> 
<div class="modal-footer"> 
    <button class="btn btn-primary" ng-click="ok()">OK</button> 
    <button class="btn btn-warning" ng-click="cancel()">Cancel</button> 
</div> 

enter image description here

enter image description here

+0

błąd w adresie URL/link określono –

+1

2 rzeczy: 1. pokazać nam więcej kontekstu (jak otworzyć modalnego itd.) 2. Spróbuj odtworzyć go w plnkr lub podobnym. –

+0

@arturgrzesiak: dodany kod dla modalu otwartego. – Shreejibawa

Odpowiedz

4

Ok, to dość dziwne, ale wydaje się, że szablon jest oparty na gałęzi mistrzowskiej https://github.com/angular-ui/bootstrap/blob/master/template/modal/window.html

i swoich źródeł w tagu 0,11.

https://github.com/angular-ui/bootstrap/blob/0.11.0/src/modal/modal.js

Jest to widoczne podczas wpisywania $ („modal-content”) w konsoli, widać, że potrzebuje dyrektywę modal-transclude, ale w źródłach nie ma śladu tego dyrektywa. Ponieważ w wersji 0.11 bezpośrednio używa dyrektywy ng-transclude, która jest częścią kątową.

Więc kod jest poprawny, ale lib nie jest, spróbuj pobierania poprawną wersję nim (może ostatni build ich repo jest uszkodzona)

+1

Dokładnie to, co miałem jako problem i co napisałem w komentarzu mojej odpowiedzi. Aktualizacja do bootstrap css v3.1.1 i ui-bootstrap-tpls-0.11.0.js rozwiązała problem, ale Shreejibawa powiedział, że to mu nie pomogło. – zszep

+0

Próbowałem już dokonać aktualizacji .. co powiedział IxDay może wydawać się poprawne. Pozwól, że spróbuję. Daj znać tak szybko, jak to możliwe. – Shreejibawa

+0

uaktualniona biblioteka. działa idealnie! dzięki! : D – Shreejibawa

4

W rzeczywistości, ja miałem podobny problem przy przejściu na angularjs v1.2. Wcześniej działające okno dialogowe nie było wyświetlane, tak jak twoje. Musiałem zmienić strukturę, aby wyglądać tak, aby ponownie widoczne:

<div class="modal-dialog"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
      <div class="row"> 
       <div class="col-lg-9"> 
        <h3>{{header}}</h3> 
       </div> 
      </div> 
     </div> 
     <div class="modal-body"> 
      <form name = "kontoForm" szp-focus="sifra"> 
       <!-- Šifra --> 
       <szp-input id="sifra" text="Šifra" place-holder="šifra" value="konto.sifra" required="!konto.sifra"></szp-input> 
       <!-- Naziv --> 
       <szp-input id="naziv" text="Naziv" place-holder="naziv" value="konto.naziv" required="!konto.naziv"></szp-input> 
      </form> 
     </div> 
     <div class="modal-footer"> 
      <button class="btn btn-primary" ng-hide="!kontoForm.$valid || (mode == 'edit')" ng-click="okContinue()">OK i nastavi</button> 
      <button class="btn btn-primary" ng-hide="!kontoForm.$valid" ng-click="ok()">OK i zatvori</button> 
      <button class="btn btn-warning" ng-click="cancel()">Odustani</button> 
     </div> 
    </div> 
</div> 

musiałem zawijać Everythin w div z klasą modalnej-content, aby to działało.

+0

nie działa przepraszam! – Shreejibawa

+1

Inną rzeczą, którą musiałem zrobić, to zmienić na bootstrap css v3.1.1 i ui-bootstrap-tpls-0.11.0.js. Spróbuj tego. Rozwiązał mój problem. – zszep

+0

nie działa senor. – Shreejibawa

-1

enter image description here zawierać pliki .map dla jQuery i kątowe w folderze/js .may być, że pomoże

-1

Mam doświadczenie to z przerwami od jakiegoś powodu, jak również.

Rozwiązałem go, dodając instrukcję CSS, po przeprowadzeniu inspekcji za pomocą narzędzi Chrome odkryłem, że z jakiegoś powodu wyświetlacz modalny wciąż był ukryty.

.modal { 
    display: block; 
} 
-1

spojrzeć ten link.

vm_main.showModal = { 
     mostrarErrores : false, 
     showModal : function(jsonError) { 
      var options={ 
       tituloModal: jsonError.titleModal, 
       textoPrincipal: jsonError.mainMessage, 
       textoBtnAceptar: "Aceptar", 
       accionBtnAceptar: "vm_popup.cerrarPopup()", 
      }; 
      commonPopUpService.getDisclaimerGeneric($scope, 'commonPopUpController', options); 
     } 
    }; 

http://plnkr.co/edit/EYDEG5WSmNwxQflsB21T?p=preview

myślę pomoże Ci w jaki sposób załadować prosty DINAMIC html jako modalnej.

Pozdrowienia