Modal in Angular JS

Okay, also habe ich 2 html Dateien, die index.html und airlines.html ist, dann habe ich eine app.js .. so alles war in Ordnung, bis mein Prof uns sagte, dass wir es modal statt machen müssen um den Inhalt auf der Seite anzuzeigen. Also ändere ich meinen Code in meiner app.js, aber es funktioniert nicht. Was mache ich falsch?Modal in Angular JS

ist dies die App:

(function(){ 
 

 
angular.module('myModalApp', ['ngDialog']) 
 
.controller('AppCtrl', AppCtrl) 
 

 
function AppCtrl ($scope){ 
 
    $scope.airlines = { 
 
     "PAL": { 
 
      "code": "PAL", 
 
      "name": "Philippine Airlines", 
 
      "destinations": ["Cebu", "Manila", "Davao", "Bohol", "Caticlan"] 
 
     }, 
 
     
 
     "CP": { 
 
      "code": "CP", 
 
      "name": "Cebu Pacific Air", 
 
      "destinations": ["Laong", "Manila", "Legazpi", "Cagayan de Oro", "Palawan"] 
 
     }, 
 
     
 
     "AA": { 
 
      "code": "AA", 
 
      "name": "AirAsia", 
 
      "destinations": ["Cebu", "Manila", "Clark", "Davao", "Kalibo"] 
 
     }   
 
    
 
    }; 
 

 
function AppCtrl($scope,ngDialog) { 
 

 
    ngDialog.open({template: 'partials/airlines.html'; 
 
    $scope.currentAirline = null; 
 

 
    $scope.setAirline = function(code){ 
 
    $scope.currentAirline = $scope.airlines[code]; 
 

 
}; 
 

 
}

dies ist die index.html

<!DOCTYPE html> 
 
<html ng-app=""> 
 
<head> 
 
    <title></title> 
 
    <script type="text/javascript" src="js/lib/angular.min.js"></script> 
 
    <script type="text/javascript" src="js/controllers/ngDialog.js"></script> 
 
    <script type="text/javascript" src="js/controllers/app.js"></script> 
 
    <link rel="stylesheet" type="text/css" href="css/boostrap.min.css"> 
 
    <link rel="stylesheet" type="text/css" href="css/bootstrap-responsive.min.css"> 
 
    <link rel="stylesheet" type="text/css" href="css/ngDialog.css"> 
 
    <link rel="stylesheet" type="text/css" href="css/ngDialog-theme-default.css"> 
 
    </head> 
 

 
    <body> 
 
     <div class="container" ng-controller="AppCtrl"> 
 
     <h1> Airlines in PH</h1> 
 
      <div class="pull-left span6"> 
 
       <ul> 
 
        <li ng-repeat="airline in airlines"> 
 
         <a href="" ng-click="open(setAirline(airline.code))"> 
 
         {{airline.code}} - {{airline.name}}</a> 
 
        </li> 
 
       </ul> 
 
      </div> 
 
     
 
     <div class="span5" ng-include src="sidebarURL"></div> 
 

 
      </div>  
 
      
 
     
 

 
    </body> 
 

 

 
</html>

und dies ist der airlines.html

<div ng-show="currentAirline"> 
 
    <h3>{{currentAirline.name}}</h3> 
 
    
 
    <h4>Destinations</h4> 
 
    
 
    <ul> 
 
     <li ng-repeat="destination in currentAirline.destinations">{{destination}}</li> 
 
    
 
    </ul> 
 
    
 
    
 

 
</div>

Quelle

2016-08-04 Franchette

können Sie die Ansicht veröffentlichen, wo Sie die modale – Sajeetharan

öffnen @Sajeetharan ich meinen Beitrag bearbeitet, habe ich sowohl Index und airlines.html – Franchette

Sie haben zwei AppCtrl Funktionen. Sie benötigen einen Controller mit einem anderen Namen für Ihr Modal.

Ihre zweite AppCtrl-Funktion ist nicht einmal richtig gebildet und wird den Browser fehlerhaft.

ngDialog.open({template: 'partials/airlines.html';

fehlt die schließende Klammer.

ngDialog.open({template: 'partials/airlines.html'});

Quelle

2016-08-04 03:29:47

Ich habe versucht, einen meiner appctrl zu ändern .. aber es ist immer noch nicht funktioniert .. und ich habe die schließende Klammer hinzugefügt, die immer noch nicht funktioniert .. – Franchette

Modal in Angular JS

Antwort

Verwandte Themen