CODEWITHSUNDEEP
angularjsmodal-dialog
Franchette
Franchette

Reputation: 27

Modal in Angular JS

Okay so I did 2 html files which is index.html and airlines.html, then I created an app.js.. so everything was okay until my prof told us that we need to make it modal instead of showing the contents on the page. So I change my code in my app.js but it is not working. What am I doing wrong?

this is the 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];

};

}

this is the 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>

and this is the 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>

Upvotes: 1

Views: 79

Answers (1)

Adrian Brand
Adrian Brand

Reputation: 21658

You have two AppCtrl functions. You will need a controller with a different name for your modal.

Your second AppCtrl function is not even properly formed and will error the browser.

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

is missing the closing bracket.

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

Upvotes: 1

Related Questions