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

回答

相关问题