Modular in Angular JS

好吧，我做了2個html文件，它是index.html和airlines.html，然後我創建了一個app.js ..所以一切都還好，直到我的教授告訴我們我們需要讓它變爲模態顯示頁面上的內容。所以我改變我的app.js中的代碼，但它不工作。我究竟做錯了什麼？Modular in Angular JS

這是應用程序：

(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]; 
 

 
}; 
 

 
}

這是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>

，這是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>

來源

2016-08-04 Franchette

你可以發表你的看法，你打開模式 – Sajeetharan

@Sajeetharan我編輯我的職務，我把兩個指數和airlines.html – Franchette

你有兩個AppCtrl功能。你需要一個名字不同的控制器。

您的第二個AppCtrl函數甚至沒有正確組成，並且會使瀏覽器錯誤。

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

缺少右括號。

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

來源

2016-08-04 03:29:47

我試圖改變我的appctrl之一..但它仍然沒有工作..並且我添加了右括號仍然不起作用。 – Franchette

Modular in Angular JS

回答

相關問題