Question

我正在尝试在Angular应用程序中创建一个弹出窗口。我指的是this link来制作窗口。

我只是将按钮添加到我的abc.html：

 <button class="btn btn-warning" ng-click="launch('create')">Custom Dialog</button>

我还添加了链接中提到的CSS样式。然后，我添加了略有不同的控制器： App.js文件：

var myApp = angular.module('myApp',[
  'ui.router',
  'ui.bootstrap',
  'validation', 
  'validation.rule', 
  'users',
  'dashboard',
  'reports',
  'employees',
  'reservations',
  'employeeTalentPool',
  'ui.bootstrap',
  'dialogs'
]);

abc.js：

myApp.controller('dialogServiceTest', function ($scope, $rootScope, $timeout, $dialogs) {
    $scope.confirmed = 'You have yet to be confirmed!';
    $scope.name = '"Your name here."';

    $scope.launch = function (which) {
        var dlg = null;
        switch (which) {

            // Error Dialog
            case 'error':
                dlg = $dialogs.error('This is my error message');
                break;

                // Wait / Progress Dialog
            case 'wait':
                dlg = $dialogs.wait(msgs[i++], progress);
                fakeProgress();
                break;

                // Notify Dialog
            case 'notify':
                dlg = $dialogs.notify('Something Happened!', 'Something happened that I need to tell you.');
                break;

                // Confirm Dialog
            case 'confirm':
                dlg = $dialogs.confirm('Please Confirm', 'Is this awesome or what?');
                dlg.result.then(function (btn) {
                    $scope.confirmed = 'You thought this quite awesome!';
                }, function (btn) {
                    $scope.confirmed = 'Shame on you for not thinking this is awesome!';
                });
                break;

                // Create Your Own Dialog
            case 'create':
                dlg = $dialogs.create('/dialogs/whatsyourname.html', 'whatsYourNameCtrl', {}, { key: false, back: 'static' });
                dlg.result.then(function (name) {
                    $scope.name = name;
                }, function () {
                    $scope.name = 'You decided not to enter in your name, that makes me sad.';
                });

                break;
        }; // end switch
    }; // end launch

    // for faking the progress bar in the wait dialog
    var progress = 25;
    var msgs = [
      'Hey! I\'m waiting here...',
      'About half way done...',
      'Almost there?',
      'Woo Hoo! I made it!'
    ];
    var i = 0;

    var fakeProgress = function () {
        $timeout(function () {
            if (progress < 100) {
                progress += 25;
                $rootScope.$broadcast('dialogs.wait.progress', { msg: msgs[i++], 'progress': progress });
                fakeProgress();
            } else {
                $rootScope.$broadcast('dialogs.wait.complete');
            }
        }, 1000);
    }; // end fakeProgress 

}) // end dialogsServiceTest
.controller('whatsYourNameCtrl', function ($scope, $modalInstance, data) {
    $scope.user = { name: '' };

    $scope.cancel = function () {
        $modalInstance.dismiss('canceled');
    }; // end cancel

    $scope.save = function () {
        $modalInstance.close($scope.user.name);
    }; // end save

    $scope.hitEnter = function (evt) {
        if (angular.equals(evt.keyCode, 13) && !(angular.equals($scope.name, null) || angular.equals($scope.name, '')))
            $scope.save();
    }; // end hitEnter
}) // end whatsYourNameCtrl
.run(['$templateCache', function ($templateCache) {
    $templateCache.put('/dialogs/whatsyourname.html', '<div class="modal"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"><h4 class="modal-title"><span class="glyphicon glyphicon-star"></span> User\'s Name</h4></div><div class="modal-body"><ng-form name="nameDialog" novalidate role="form"><div class="form-group input-group-lg" ng-class="{true: \'has-error\'}[nameDialog.username.$dirty && nameDialog.username.$invalid]"><label class="control-label" for="username">Name:</label><input type="text" class="form-control" name="username" id="username" ng-model="user.name" ng-keyup="hitEnter($event)" required><span class="help-block">Enter your full name, first &amp; last.</span></div></ng-form></div><div class="modal-footer"><button type="button" class="btn btn-default" ng-click="cancel()">Cancel</button><button type="button" class="btn btn-primary" ng-click="save()" ng-disabled="(nameDialog.$dirty && nameDialog.$invalid) || nameDialog.$pristine">Save</button></div></div></div></div>');
}]); // end run / module

在运行应用程序时，我收到错误：

    angular.js:78 Uncaught Error: [$injector:modulerr] Failed to instantiate module myApp due to:
Error: [$injector:modulerr] Failed to instantiate module ngAnimate due to:
Error: [$injector:unpr] Unknown provider: $animateProvider
http://errors.angularjs.org/1.2.25/$injector/unpr?p0=%24animateProvider
    at http://localhost:51703/bower_components/angular/angular.js:78:12
    at http://localhost:51703/bower_components/angular/angular.js:3802:19
    at getService (http://localhost:51703/bower_components/angular/angular.js:3930:39)
    at invoke (http://localhost:51703/bower_components/angular/angular.js:3957:13)
    at Object.instantiate (http://localhost:51703/bower_components/angular/angular.js:3977:23)
    at provider (http://localhost:51703/bower_components/angular/angular.js:3833:36)
    at Object.provider (http://localhost:51703/bower_components/angular/angular.js:3825:16)
    at http://localhost:51703/bower_components/angular/angular.js:3885:37
    at forEach (http://localhost:51703/bower_components/angular/angular.js:325:18)
    at loadModules (http://localhost:51703/bower_components/angular/angular.js:3872:5)
http://errors.angularjs.org/1.2.25/$injector/modulerr?p0=ngAnimate&p1=Error…F%2Flocalhost%3A51703%2Fbower_components%2Fangular%2Fangular.js%3A3872%3A5)
    at http://localhost:51703/bower_components/angular/angular.js:78:12
    at http://localhost:51703/bower_components/angular/angular.js:3906:15
    at forEach (http://localhost:51703/bower_components/angular/angular.js:325:18)
    at loadModules (http://localhost:51703/bower_components/angular/angular.js:3872:5)
    at http://localhost:51703/bower_components/angular/angular.js:3879:40
    at forEach (http://localhost:51703/bower_components/angular/angular.js:325:18)
    at loadModules (http://localhost:51703/bower_components/angular/angular.js:3872:5)
    at createInjector (http://localhost:51703/bower_components/angular/angular.js:3812:11)
    at doBootstrap (http://localhost:51703/bower_components/angular/angular.js:1444:20)
    at bootstrap (http://localhost:51703/bower_components/angular/angular.js:1459:12)
http://errors.angularjs.org/1.2.25/$injector/modulerr?p0=myApp&p1=Error%3A%…%2Flocalhost%3A51703%2Fbower_components%2Fangular%2Fangular.js%3A1459%3A12)(anonymous function) @ angular.js:78(anonymous function) @ angular.js:3906forEach @ angular.js:325loadModules @ angular.js:3872createInjector @ angular.js:3812doBootstrap @ angular.js:1444bootstrap @ angular.js:1459angularInit @ angular.js:1368(anonymous function) @ angular.js:22019j @ jquery-1.11.0.js:2fireWith @ jquery-1.11.0.js:2ready @ jquery-1.11.0.js:2K @ jquery-1.11.0.js:2

我是初学者，不知道它是如何运作的。任何人都可以帮我解决这个问题吗？

Answer 1

您需要ngAnimate - https://docs.angularjs.org/api/ngAnimate

安装后，作为对应用程序的依赖：

angular.module('myApp', ['other deps...','ngAnimate']);

Answer 2

示例：

ngDialog.open({
    template: 'templateId',
    className: 'ngdialog-theme-default'
});

但根据您的代码，您正在寻找显示通知消息的Dialog。请参阅文件ngDialog

Answer 3

也许你可以尝试这些。

https://material.angularjs.org/latest/demo/dialog

试图创建一个Angular Popup窗口

3 个答案: