2017-05-02 7 views
2

Ich habe für Popup auf einer Seite (Inspirations Seite in diesem Fall) erstellt. Diese Seite ist eine Direktive, die in 'product_chat.html' enthalten ist, die mit 'product_chat.js' verbunden ist. Alle diese Dateien werden initiiert von index.htmlModal Popup funktioniert auf meinem lokalen aber funktioniert nicht auf Produktionsserver (AWS)

index.html

<!DOCTYPE html> 

<html ng-app="myApp" lang="en" class="no-js" xmlns="http://www.w3.org/1999/html"> <!--<![endif]--> 
<head data-ng-app="app"> 
    <meta charset="utf-8"> 
    <meta name="verify-admitad" content="ed499e6bac"/> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="wot-verification" content="591de88d2ae5d58564c7"/> 

    <title ng-bind="title">"Online shopping site | Women fashion | Personal styling - Selekt"</title> 
    <link rel="icon" href="/pics/favicon.png"> 
    <meta name="description" content="{{meta_desc}}"> 
    <meta itemprop="description" content="Application wide description for Schema.org (Google+ uses this)"> 

    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link href='https://fonts.googleapis.com/css?family=Montserrat:400,700,200,300' rel='stylesheet' type='text/css'> 
<link rel="canonical" href="{{canonical_url}}"> 
    <link rel="stylesheet" href="bower_components/html5-boilerplate/dist/css/normalize.css"> 
    <link rel="stylesheet" href="bower_components/html5-boilerplate/dist/css/main.css"> 
    <link rel="stylesheet" href="bower_components/dist/angular-typewrite.css"/> 
    <link rel="stylesheet" href="css/isteven-multi-select.css"/> 
    <link rel="stylesheet" href="css/app.css"> 
    <link rel="stylesheet" href="css/select-css.css"> 
    <link rel="stylesheet" href="css/style_find.css"> 
    <link rel="stylesheet" href="css/select-css-compact.css"> 
    <link rel="stylesheet" href="css/searchSelect.css"> 
    <link rel="stylesheet" href="css/style_load.css"> 
    <link rel="stylesheet" href="css/popup.css"> 

    <!--<script src="bower_components/html5-boilerplate/dist/js/vendor/modernizr-2.8.3.min.js"></script>--> 

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> 
    <link rel="stylesheet" href="css/bootstrap-select.css"> 
    <link rel="stylesheet" href="bower_components/ngModal/ng-model.css"> 

<script> 
    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ 
    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), 
    m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) 
    })(window,document,'script','https://www.google-analytics.com/analytics.js','ga'); 

    ga('create', 'UA-92766347-1', 'auto'); 
    ga('send', 'pageview'); 

</script> 


    <style> 
     [ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak { 
      display: none !important; 
     } 

     .main_banner { 
      background-image: url('pics/banner.png'); 
      background-repeat: no-repeat; 
      min-height: 100vh; 
      display: block; 
      overflow-x: hidden; 
      background-size: 1600px 900px; 

     } 
    </style> 
    <base href="/"/> 
</head> 
<body class="main_banner"> 


<div class=""> 
    <div ng-view> 

    </div> 
</div> 


<!--In production use:--> 
<!-- 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.9/angular.min.js"></script> 
--> 

<script src="bower_components/angular/angular.min.js"></script> 
<script src="bower_components/angular-route/angular-route.js"></script> 

<script src="bower_components/angular-cookies/angular-cookies.min.js"></script> 
<script src="node_modules/socket.io/socket.io.js"></script> 
<!--<script src="bower_components/socket.io-client/socket.io.js"></script>--> 
<!--<script src="bower_components/angular-socket-io/socket.js"></script>--> 


<script src="js/angular-searchAndSelect.js"></script> 


<script src="product-app-services/app-services.js"></script> 
<script src="publish/wedding-dresses-for-women/product-chat.js"></script> 
<script src="publish/home/product-chat.js"></script> 
<script src="publish/search/product-chat.js"></script> 
<script src="publish/find/product-chat.js"></script> 


<script src="app-services/app.module.js"></script> 
<script src="app.js"></script> 
<script src="bower_components/angular-typewrite/dist/angular-typewrite.js"></script> 
<!--//custom dialog--> 
<script src="bower_components/jquery/dist/jquery.min.js"></script> 

<script src="https://cdnjs.cloudflare.com/ajax/libs/ngStorage/0.3.6/ngStorage.min.js"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
<script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script> 
<script src="bower_components/bootbox/bootbox.js"></script> 
<script src="bower_components/ngBootbox/dist/ngBootbox.min.js"></script> 
<script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js"></script> 
</body> 
</html> 

product_chat.html

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
    <title>Private Chat Application with Node.js, Socket.IO and AngularJS</title> 
    <meta name="generator" content="Bootply"> 
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> 
    <link rel="stylesheet" href="css/style_find.css"> 
</head> 

<body cz-shortcut-listen="true" style="background: white"> 

<div id="main_page" ng-show="show_page" scroll > 
    <nav_header></nav_header> 
    <div> 
     <div> 
      <inspirations ng-if="inspirations_dir"; ng-init="myDialog()"></inspirations> 
     </div> 
    </div> 


</div> 
</body> 
</html> 

in dem obigen Code, ich rufe Popup-Funktion in 'Inspirationen' Tag

Hier ist meine product_chat.js Datei (Nur der relevante Teil des Codes ist beigefügt)

var app = angular.module("WeddingDressesForWomen", ['ui.bootstrap']); 
app.controller("WeddingDressesForWomen", ["$http","$rootScope", '$scope', '$window', 'socket', "$location", "$anchorScroll", "$timeout", '$routeParams', 'title', 'userService', '$filter', '$document', '$localStorage','$uibModal', 
    function ($http,$rootScope, $scope, $window, socket, $location, $anchorScroll, $timeout, $routeParams, title, userService, $filter, $document, $localStorage,$uibModal) { 
     $scope.myDialog = function() { 
    $uibModal.open({ 
     templateUrl: 'template/popup.html', 
     backdrop: 'static', 
     windowClass: 'modal', 
     size: 'lg', 
     controller: function ($scope, $uibModalInstance) { 
      $scope.cancel = function() { 
       $uibModalInstance.dismiss(); 
      }; 
      } 
    }); 
}; 
}]); 

popup.html Vorlage

<div class="modal-header"> 
    <h3 class="modal-title">Note</h3> 
    </div> 
    <div class="modal-body"> 
    Selekt will be functionally live with Women's Fashion by 10th May and Men's Fashion by 30th May. It is currently in Beta phase. 
    </div> 
    <div class="modal-footer"> 
    <button class="btn btn-warning" type="button" style="background-color:#337ab7; border-color:#2e6da4" 
    ng-click="cancel()">Okay</button> 
    </div> 
+0

Alle Fehler in der Konsole? – Leguest

+0

@Leguest Nein, nichts –

+0

Wie stellen Sie auf aws bereit? – Leguest

Antwort

1

ich dazu sagen kann wegen meines Rufes! Aber verkleinert du das Javascript? Ich kann sehen, Sie haben implizite Abhängigkeitsinjektion für $ uibModalInstance im Controller verwendet - Sie sollten auch die Eigenschaft Annotation verwenden, wenn Sie die Controller-Abhängigkeiten für $ uibModalInstance deklarieren, sonst wird der Code bei der Minimierung des Javascript gebrochen.

Auch für die Bootstrap-Bibliothek. Sie können den Dienst in der Konsole protokollieren. I.c. console.log ($ nameOfService) ... Können Sie das Bootstrap-JavaScript nicht herunterladen und zum Projekt hinzufügen?

+0

Mit Ausnahme der Dateien ng-storage und jquery js wurden alle anderen js-Dateien heruntergeladen und dann von local aufgenommen. Ich habe mein Javascript nicht verkleinert. Ja, ich habe die Abhängigkeitsinjektion $ uibModal verwendet, andernfalls ist $ uibModalInstance nicht funktionsfähig –

Verwandte Themen