ngDialog 模态不弹出答案

【问题标题】：ngDialog modal does not pop upngDialog 模态不弹出
【发布时间】：2015-11-20 09:25:25
【问题描述】：

我试图在单击按钮时显示一个简单的模式。模态不会弹出。它在同一个现有窗口上显示内容。（附快照）

我的代码如下：

index.html

<!DOCTYPE html>
<html ng-app="Pcp">
<head>
    <script src="js/jquery.min.js"></script>
    <script src="js/angular.min.js"></script>
    <script type="text/javascript" src="app.js"></script>
    <script src="ng-dialog/js/ngDialog.min.js"></script>
    <script src="ng-dialog/js/ngDialog.js"></script>
</head>
<body>
    <div ng-controller="MainController">
    <button ng-click="openTaskForm()">Open</button>
    </div>
</body>
</html>

app.js

(function(){
    var app = angular.module('Pcp',['ngDialog']);
     app.controller('MainController', function($scope, ngDialog)
    {
        $scope.openTaskForm = function(){
        ngDialog.open({template: 'addTaskForm.html'

        });

        };      
    }
);

})();

addTaskForm.html

<div>
    <h2>Contact us<h2>
    <input type="text" placeholder="Name" ng-model="name" />
    <input type="text" placeholder="Email" ng-model="email" />
    <input type="text" placeholder="Mobile" ng-model="mobile" />
    <textarea placeholder="Enter your message or query..." ng-model="message"></textarea>
    <div class="ngdialog-buttons">
        <button type="button" class="ngdialog-button ngdialog-button-secondary" ng-click=closeThisDialog("Cancel")>Cancel</button>
        <button type="button" class="ngdialog-button ngdialog-button-primary" ng-click=confirm("OK")>OK</button>
        </div>
</div>

请告诉我为什么模态不工作。

Screenshot

【问题讨论】：

首先包括 ngDialog.min.js 或 ngDialog.js（因为两者都是一样的）。还要在 app.js 之前包含它。你得到的错误是什么？

标签： javascript angularjs angularjs-directive ng-dialog

【解决方案1】：

你应该在标题中包含 ngDialog 的 css 文件：

<head>
    <script src="js/jquery.min.js"></script>
    <script src="js/angular.min.js"></script>
    <script type="text/javascript" src="app.js"></script>
    <script src="ng-dialog/js/ngDialog.min.js"></script>
    <script src="ng-dialog/js/ngDialog.js"></script>

    <link rel="stylesheet" th:href="@{/css/ngDialog.css}" href="../../css/ngDialog.css" > </link>
    <link rel="stylesheet" th:href="@{/css/ngDialog-theme-default.css}" href="../../css/ngDialog-theme-default.css" > </link>
</head>

【讨论】：

【解决方案2】：

ngDialog.open({
       template: 'addTaskForm.html',
       scope : $scope,
       resolve: {
           data: function sendData() {
               return data; // if you need to pass any data
           }
       }
});

【讨论】：

谢谢。不工作。它仍然显示旧行为。

【解决方案3】：

我遇到了同样的问题并实施了@Enigo 和@Sujata 的上述建议，但没有帮助。经过进一步分析，我注意到我将 CSS 文件呈现为 media="print" 的错误，因此将它们更正为 media="screen" 见下文：

<link href='@Styles.Url("~/lib/Dialog/ngDialog-theme-default.css")' rel="stylesheet" type="text/css" media="screen" />
<link href='@Styles.Url("~/lib/Dialog/ngDialog-theme-plain.css")' rel="stylesheet" type="text/css" media="screen" />

希望这会有所帮助。请注意@Styles.Url() 是 ASP.NET MVC Razor 语法。

【讨论】：