在 angularjs 中注入 $dialog 时出错答案

【问题标题】：error injecting $dialog in angularjs在 angularjs 中注入 $dialog 时出错
【发布时间】：2013-09-07 02:53:24
【问题描述】：

我想显示来自 angularjs controller 的 dialog。我正在使用angular-ui 和angular-strap

在控制器中注入 $dialog 时出现以下错误：

Error: [$injector:unpr] http://errors.angularjs.org/1.2.0rc1/$injector/unpr?p0=%24dialogProvider%20%3C-%20%24dialog
    at Error (<anonymous>)
    at https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular.min.js:6:450
    at https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular.min.js:31:145
    at Object.c [as get] (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular.min.js:28:296)
    at https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular.min.js:31:213
    at c (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular.min.js:28:296)
    at d (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular.min.js:28:473)
    at Object.instantiate (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular.min.js:30:123)
    at https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular.min.js:58:153
    at https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular.min.js:46:383

我的 ApplicationResources.groovy

     angularJs { resource url:'https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular.min.js' }
     angularUI {
            dependsOn 'angularJs'
            dependsOn 'jquery'
            dependsOn 'googleMaps'
            resource url:'https://cdnjs.cloudflare.com/ajax/libs/angular-ui/0.4.0/angular-ui.min.css',attrs:[rel: "stylesheet", type:'css']
            resource url:'https://cdnjs.cloudflare.com/ajax/libs/angular-ui/0.4.0/angular-ui.min.js'
            resource url:'https://cdnjs.cloudflare.com/ajax/libs/angular-ui/0.4.0/angular-ui-ieshiv.min.js'
          }
     angularStrap {
         dependsOn 'angularJs'
         dependsOn 'bootstrapJs'
         dependsOn 'datepicker'
         resource url: 'https://cdnjs.cloudflare.com/ajax/libs/angular-strap/0.7.4/angular-strap.min.js'
         resource url: 'js/angular-strap/datepicker.js'
         resource url: 'js/angular-strap/timepicker.js'
     }
     userJs { resource url:'js/user.js' }

我的用户.gsp

<html ng-app="user">

    <r:require modules="bootstrapJs" />
    <r:require modules="userJs" />
    <r:require modules="angularJs" />
</html>

我的 EncouragementController.js 使用 angular-ui 的 ui.bootstrap.dialog 是

 function EncouragementController($scope, $http, $dialog, encouragementService) {
          //
    $scope.showMessage = function(message){
        var title = 'Alert';
        var msg = message;
        var btns = [{result:'cancel', label: 'Cancel'}, {result:'ok', label: 'OK', cssClass: 'btn-primary'}];

        $dialog.messageBox(title, msg, btns)
          .open()
          .then(function(result){
        });
     };
    }
 EncouragementController.$inject = [ '$scope', '$http', '$dialog', 'encouragementService' ];

我的 app.js

var user = angular.module('user', [ 'ui', '$strap.directives' ]);

我关注了angular js unknown provider，但那里没有对我有用的答案。

【问题讨论】：

标签： javascript angularjs

【解决方案1】：

AngularStrap 没有$dialog 服务。如果要使用 AngularStrap 的模态服务，请将其更改为 $modal。

AngularUI 确实有一个$dialog 服务。但要使用它，您必须将 ui.bootstrap 模块链接到您的应用程序。

angular.module('user', [ 'ui', '$strap.directives', 'ui.bootstrap']);

$modal 和 $dialog 有不同的 API，所以你必须决定要使用哪一个。

现在重要的是要注意 AngularStrap 和 AngularUI 在功能上相互重叠很多（例如，两者都提供模态服务导致上述混乱）。有什么理由必须同时使用两者吗？

【讨论】：

将'ui.bootstrap' 模块添加到app.js 也不起作用。我得到 => Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.2.0rc1/$injector/modulerr?p0=merchant&p1=Erro…eapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.0rc1%2Fangular.min.js%3A27%3A198)
你能发布一个小提琴或 plunker 吗？
jsfiddle link。我没怎么用过jsfiddle。
我已经修复了一些问题（缺少对 AngularUI 的引用、缺少 ng-app、删除 'ui' 引用 [不存在]），请参阅此小提琴：jsfiddle.net/buunguyen/Mq6DJ/11。它显示了与页面内联的模态，您只需要引用 Bootstrap CSS 即可正确呈现模态。
好的，我会检查并回复您。