2

我在页面上构建了弹出窗口（在这种情况下为灵感页面）。此页面是包含在主“product_chat.html”中的指令，该指令连接到“product_chat.js”。所有这些文件都是从 index.html 启动的

索引.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>

在上面的代码中，我在“灵感”标签中调用弹出函数

这是我的 product_chat.js 文件（仅附上相关部分代码）

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 模板

<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>
4

1 回答 1

1

由于我的声誉，我无法对此发表评论！但是你缩小了javascript吗？我可以看到您在控制器中为 $uibModalInstance 使用了隐式依赖注入 - 当您为 $uibModalInstance 声明控制器依赖项时，您也应该使用属性注释，否则在缩小 javascript 时代码将被破坏。

也用于引导库。您可以将服务记录到控制台.. 即 console.log($nameOfService)... 您不能下载引导 javascript 并将其添加到项目中吗？

于 2017-05-02T14:27:40.887 回答