0

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

我的代码如下：

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

应用程序.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>

请让我知道为什么模式不起作用。

截屏

4

3 回答 3

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>
于 2016-02-02T08:00:35.950 回答
0 
ngDialog.open({
       template: 'addTaskForm.html',
       scope : $scope,
       resolve: {
           data: function sendData() {
               return data; // if you need to pass any data
           }
       }
});
于 2015-11-20T09:35:03.377 回答
0

我遇到了同样的问题并实施了@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 语法。

于 2019-08-19T01:03:53.110 回答