Javascript 角度模态服务

我试图让模态在我的角度应用程序中工作。我尝试使用引导和角度材料模态，但我无法使它们工作。我决定尝试使用角度模态服务，但是我得到了相同的错误。无论何时调用函数ModalService.showmodel，都会出现以下错误：

angular.js:12416 TypeError: Cannot read property 'showModal' of undefined
at Scope.$scope.show (AboutController.js:4)
at fn (eval at <anonymous> (angular.js:13231), <anonymous>:4:203)
at callback (angular.js:23371)
at Scope.$eval (angular.js:15878)
at Scope.$apply (angular.js:15978)
at HTMLAnchorElement.<anonymous> (angular.js:23376)
at HTMLAnchorElement.n.event.dispatch (jquery-2.2.3.min.js:3)
at HTMLAnchorElement.r.handle (jquery-2.2.3.min.js:3)

我使用的JS小提琴示例：

https://github.com/dwmkerr/angular-modal-service

http://jsfiddle.net/dwmkerr/8MVLJ/?utm_source=website&utm_medium=embed&utm_campaign=8MVLJ

<!-- Include jQuery -->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
<!-- Include Bootstrap -->
<script src="../node_modules/bootstrap/js/bootstrap.js"></script>
<!-- Include Angular -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.js"></script>
<!-- Include ModalService-->
<script src="../node_modules/angular-modal-service/dst/angular-modal-service.min.js"></script> 

<div class="container">
<div class="col-sm-6 col-sm-offset-3 form-box">

<h3>Comentarios</h3>

<a class="btn btn-default" href ng-click="show()">Show a Modal</a>
 <!-- The actual modal template, just a bit o bootstrap -->
 <script type="text/ng-template" id="modal.html">
     <div class="modal fade">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" ng-click="close('Cancel')" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title">Yes or No?</h4>
          </div>
          <div class="modal-body">
            <p>It's your call...</p>
          </div>
          <div class="modal-footer">
            <button type="button" ng-click="close('No')" class="btn btn-default" data-dismiss="modal">No</button>
            <button type="button" ng-click="close('Yes')" class="btn btn-primary" data-dismiss="modal">Yes</button>
          </div>
        </div>
      </div>
    </div>
 </script>
</div>
</div>

var Tiendiia = angular.module('Tiendiia', ['ui.router', 'ngMaterial', 'ui.bootstrap', 'ngCookies', 'angularModalService',]);

Tiendiia.config(function($mdThemingProvider) {
$mdThemingProvider.theme('default')
.primaryPalette('yellow')
.accentPalette('orange')
.warnPalette('amber')
.backgroundPalette('grey');
});

包括：

https://github.com/dwmkerr/angular-modal-service

http://jsfiddle.net/dwmkerr/8MVLJ/?utm_source=website&utm_medium=embed&utm_campaign=8MVLJ

<!-- Include jQuery -->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
<!-- Include Bootstrap -->
<script src="../node_modules/bootstrap/js/bootstrap.js"></script>
<!-- Include Angular -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.js"></script>
<!-- Include ModalService-->
<script src="../node_modules/angular-modal-service/dst/angular-modal-service.min.js"></script> 

<div class="container">
<div class="col-sm-6 col-sm-offset-3 form-box">

<h3>Comentarios</h3>

<a class="btn btn-default" href ng-click="show()">Show a Modal</a>
 <!-- The actual modal template, just a bit o bootstrap -->
 <script type="text/ng-template" id="modal.html">
     <div class="modal fade">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" ng-click="close('Cancel')" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title">Yes or No?</h4>
          </div>
          <div class="modal-body">
            <p>It's your call...</p>
          </div>
          <div class="modal-footer">
            <button type="button" ng-click="close('No')" class="btn btn-default" data-dismiss="modal">No</button>
            <button type="button" ng-click="close('Yes')" class="btn btn-primary" data-dismiss="modal">Yes</button>
          </div>
        </div>
      </div>
    </div>
 </script>
</div>
</div>

var Tiendiia = angular.module('Tiendiia', ['ui.router', 'ngMaterial', 'ui.bootstrap', 'ngCookies', 'angularModalService',]);

Tiendiia.config(function($mdThemingProvider) {
$mdThemingProvider.theme('default')
.primaryPalette('yellow')
.accentPalette('orange')
.warnPalette('amber')
.backgroundPalette('grey');
});

关于controller.js

Tiendiia.controller('AboutController', ['$scope',  function($scope, ModalService) {

$scope.show = function() {
    ModalService.showModal({
        templateUrl: 'modal.html',
        controller: "ModalController"
    }).then(function(modal) {
        modal.element.modal();
        modal.close.then(function(result) {
            $scope.message = "You said " + result;
        });
    });
};


}]);

Tiendiia.controller('ModalController', function($scope, close) {

 $scope.close = function(result) {
close(result, 500); // close, but give 500ms for bootstrap to animate
};

});

ModalController.js

Tiendiia.controller('AboutController', ['$scope',  function($scope, ModalService) {

$scope.show = function() {
    ModalService.showModal({
        templateUrl: 'modal.html',
        controller: "ModalController"
    }).then(function(modal) {
        modal.element.modal();
        modal.close.then(function(result) {
            $scope.message = "You said " + result;
        });
    });
};


}]);

Tiendiia.controller('ModalController', function($scope, close) {

 $scope.close = function(result) {
close(result, 500); // close, but give 500ms for bootstrap to animate
};

});

我找遍了所有我能找到的地方，但我找不到为什么它不起作用

---

谢谢

在棱角材料上，它被称为对话框，您需要它。有时角材料使用约翰·帕帕风格，这是推荐的，但有时初学者很难理解。如果你理解了这个指南，那么你就真正理解了角度

尝试使用ui.bootstrap的模式，不要添加不必要的库以及ui bootstrap上已有的功能。无论如何，我认为你的错误可能在这里：

似乎关于控制器的on

['$scope'，函数（$scope，ModalService）

您需要添加ModalService

---

['$scope'，'ModalService'，函数（$scope，ModalService）

比我快。我相信你是对的。原因是他必须将他的

ModalService

作为控制器的依赖项注入。非常感谢！这是正确的答案，我以前尝试过，但给了我一个错误，我想在添加bootstrap.js时它已经修复。你介意详细说明一下吗还有一点为什么我需要在控制器中包含依赖项，而不仅仅是函数？Angular使用依赖项注入。例如，你下载了ui.boostrap。你需要对你的应用程序说：嘿，我需要那个库，所以你注入模块。当控制器需要服务和其他服务时也是如此。这就像导入一样。Angular实际y将在没有数组的情况下注入控制器，就像在ModalController.js上一样。问题是，如果使用uglify，它将变为字母。因此它将转换为tiendia.controller（'ModalController'，function（a，b）{..}。那么，您是如何说a是$scope的呢？您以相同的顺序传递带有数组的字符串。检查此项：并查看一般情况下的依赖项注入模式和角度上的依赖项注入模式……我认为这个问题令人困惑的部分原因是角度模式服务项目github页面上的示例（）不要在控制器依赖项中包含“ModalService”依赖项。