点击时ngDialog没有显示模态,浏览器控制台上没有显示错误

时间:2016-03-07 19:11:39

标签: javascript angularjs

我正在尝试使用ngmodal在angularjs中实现模态弹出窗口。代码运行,浏览器控制台上没有返回任何错误,但单击模式时没有任何反应。以下是我的尝试和代码

Index.html文件

<html ng-appp="myApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js">
<script src="ngDialog.js"></script>
<link src="ngDialog.css"></link>
<script src="ngDialog.min.js"></script>
<script src="app.js"></script>
</head>
<body>

<div ng-controller="MyCtrl">

    <button ng-click="clickToOpen()">My Modal</button>

    <script type="text/ng-template" id="templateId">

        <div id="target" ng-click="test()" ng-controller="tt">
          Click here
        </div>
    </script>

</div>

</body>
</html>

app.js文件

var myApp = angular.module('myApp',['ngDialog']);

//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});

function MyCtrl($scope, ngDialog) {

    $scope.clickToOpen = function () {
        ngDialog.open({ template: 'templateId' });
    };

}
function tt($scope)
{
    $scope.test = function()
    {
        console.log("AaA");
    }
}

教程来源http://jsfiddle.net/mb6o4yd1/6/ 请帮助

1 个答案:

答案 0 :(得分:0)

HTML页面。 你没有把ng-app

<!DOCTYPE html>
<html lang="en">
 <head>
 <script src="Scripts/angular.js"></script>
<script src="Scripts/ngDialog.js"></script>
<script src="Scripts/app.js"></script>
<link href="Content/ngDialog.css" rel="stylesheet" />
<link href="Content/ngDialog-theme-default.css" rel="stylesheet" />
<title></title>
</head>
 <body>
<div ng-app="myApp">
<div ng-controller="MyCtrl">
<button ng-click="clickToOpen()">My Modal</button>
 </div>

<script type="text/ng-template" id="templateId">
<div ng-controller="tt" class="ngdialog-message">
    <button ng-click="test()">Click here </button>
</div>
</script>
</div>

   

这是你的app.js

  var myApp = angular.module('myApp', ['ngDialog']);

myApp.controller('MyCtrl', function ($scope,ngDialog) {
    $scope.clickToOpen = function () {
       ngDialog.open({
           template: 'templateId'
        });
    };
});
myApp.controller('tt', function ($scope) {
    $scope.test = function () {
        alert('It works');
    }
});

让我知道你仍然发现任何问题。(我添加了ngDialog-theme-default.css)