AngularJS角度模态服务给我一个错误

我试图（失败）使用AngularModalService。从简单的教程做复制/粘贴作业给我一个错误。AngularJS角度模态服务给我一个错误

这是教程，以供参考： http://www.dwmkerr.com/the-only-angularjs-modal-service-youll-ever-need/

的Javascript：

var app = angular.module('app', ['angularModalService']); 

app.controller('Controller', function($scope,ModalService) { 

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

app.controller('ModalController', function($scope, close) { 
    $scope.close = function(result) { 
     close(result, 500); 
    }; 
}); 

</script>

HTML（在本教程的丑陋，而应该是简单）

<div class="container" style="min-width: 700px; max-width: 700px; margin: 50px auto;" data-ng-app="app" data-ng-controller="Controller"> 
    <h3>Angular Modal Service</h3> 
    <a class="btn btn-default" href ng-click="show()">Show a Modal</a> 
    <p>{{message}}</p> 

    <!-- The html template --> 
    <script type="text/ng-template" id="modal.html"> 
     <div class="modal fade"> 
      <button type="button" 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 is 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> 
    </script> 

</div>

错误我在上面指出的线上获得“undefined不是函数”，即：

modal.element.modal();

谷歌搜索导致我没有具体的。希望我只是忽略了一些愚蠢的东西。

来源

2014-11-23 kiss-o-matic

本教程采用了棱角分明1.2.9。你使用什么版本？ – cgTag 2014-11-23 17:12:12

嗨 - 1.3.0-RC5。 – 2014-11-23 17:25:02

angularModalService要求bootstrap js。在您的index.html文件中调用以下文件并尝试。

<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"></script>

来源

2014-11-23 17:17:45 Asik

这让我在某个地方，有点。我发现我还需要包含boostrap.css文件以及jquery（这不在第一位）。谢谢你的帮助！ – 2014-11-23 17:26:44

是的，欢迎你。还有一件事，你为什么不尝试角度bootstrap指令对话框.. – Asik 2014-11-23 17:29:00

B/C我是相对较新的Angular。我的前端编码技能几乎总是在桌面上。所以，代码对我来说不是太难，但我对许多概念并不熟悉。我现在有一个工作模式对话框，但它只支持基本打开/关闭。对于像登录这样的东西来说效果不好。当我谷歌搜索，几乎所有导致AngularModalService。你看看我在这里工作（在Angular的旧版本上）。 http://onfilm.us/image_index.html。对于那个，我通常想关闭X，但如果用户点击标签，它应该做别的。 – 2014-11-23 17:43:43

发生此错误是因为您正在调用Bootstrap方法来显示模式。

与上面的Asik的回答相反，AngularModalService不需要而是需要Bootstrap，但是如果您使用的是Bootstrap模式，那么您确实需要包含bootstrap js文件。

的问题在这里引用：https://github.com/dwmkerr/angular-modal-service/issues/14

自定义模态，无需引导，显示在examples page

来源

2015-11-05 04:45:24 user3331405

干杯 - 我也会研究这一点。 ;） – 2015-11-05 13:38:27

AngularJS角度模态服务给我一个错误

回答

相关问题