Angular modal service 错误 - TypeError: modal.element.modal 不是函数
Posted
技术标签:
【中文标题】Angular modal service 错误 - TypeError: modal.element.modal 不是函数【英文标题】:Angular modal service error - TypeError: modal.element.modal is not a function 【发布时间】:2015-06-26 07:57:47 【问题描述】:我有角度问题modal service
我的 app.js 包括:
angular.module('myApp', ['myApp.test', 'ui.bootstrap','smart-table''angularModalService','ngRoute','myApp.productInsert',...
test.js:
'use strict';
angular.module('myApp.test', ['angularModalService'])
.controller('ComplexController', [
'$scope', '$element', 'title', 'close',
function($scope, $element, title, close)
$scope.name = null;
$scope.age = null;
$scope.title = title;
// This close function doesn't need to use jQuery or bootstrap, because
// the button has the 'data-dismiss' attribute.
$scope.close = function()
close(
name: $scope.name,
age: $scope.age
, 500); // close, but give 500ms for bootstrap to animate
;
// This cancel function must use the bootstrap, 'modal' function because
// the doesn't have the 'data-dismiss' attribute.
$scope.cancel = function()
// Manually hide the modal.
$element.modal('hide');
// Now call close, returning control to the caller.
close(
name: $scope.name,
age: $scope.age
, 500); // close, but give 500ms for bootstrap to animate
;
]);
然后是test.html
<div class="modal fade">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" ng-click="close()" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">title</h4>
</div>
<div class="modal-body">
<p>Here's a more complex modal, it contains a form, data is passed to the controller
and data is returned from the modal.</p>
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="name" class="col-sm-2 control-label">Name</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="name" placeholder="Your Name" ng-model="name">
</div>
</div>
<div class="form-group">
<label for="age" class="col-sm-2 control-label">Age</label>
<div class="col-sm-10">
<input type="number" class="form-control" id="inputPassword3" placeholder="Age" ng-model="age">
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" ng-click="close()" class="btn btn-primary" data-dismiss="modal">OK</button>
<button type="button" ng-click="cancel()" class="btn">Cancel</button>
</div>
</div>
</div>
</div>
以及打开模态窗口的主页
'use strict';
angular.module('myApp.ricetta2', ['ngRoute', 'angularModalService','ui.bootstrap'])
.config(['$routeProvider', function($routeProvider)
$routeProvider.when('/ricetta2',
templateUrl: 'views/ricetta/ricetta2.html',
controller: 'CartForm'
);
])
.controller('CartForm', ['$scope','ModalService', function($scope, ModalService)
$scope.invoice =
items: [
qty: 10,
description: 'Pomodori',
cost: 'Kg',
qty: 10,
description: 'Olio',
cost: 'litri',
qty: 4,
description: 'Pasta',
cost: 'Kg']
;
$scope.addItem = function()
$scope.invoice.items.push(
qty: 1,
description: '',
cost: ''
);
,
$scope.removeItem = function(index)
$scope.invoice.items.splice(index, 1);
,
$scope.total = function()
var total = 0;
angular.forEach($scope.invoice.items, function(item)
total += item.qty * item.cost;
);
return total;
;
$scope.items = ['item1', 'item2', 'item3'];
$scope.productList = [];
$scope.showComplex = function()
ModalService.showModal(
templateUrl: "views/test/test.html",
controller: "ComplexController",
inputs:
title: "A More Complex Example"
).then(function(modal)
modal.element.modal();
modal.close.then(function(result)
$scope.complexResult = "Name: " + result.name + ", age: " + result.age;
);
);
;
]);
当我尝试打开模态窗口时,页面上总是出现错误:
TypeError: modal.element.modal 不是函数 在ricetta2.js:60 在 processQueue (angular.js:13248) 在 angular.js:13264 在 Scope.$get.Scope.$eval (angular.js:14466) 在 Scope.$get.Scope.$digest (angular.js:14282) 在 Scope.$get.Scope.$apply (angular.js:14571) 完成后(angular.js:9698) 在 completeRequest (angular.js:9888) 在 XMLHttpRequest.requestLoaded (angular.js:9829)(匿名函数) @ angular.js:11655$get @ angular.js:8596processQueue @ angular.js:13256(匿名函数) @ angular.js:13264$get.Scope。 $eval @ angular.js:14466$get.Scope.$digest @ angular.js:14282$get.Scope.$apply @ angular.js:14571done @ angular.js:9698completeRequest @ angular.js:9888requestLoaded @ angular.js :9829
我在 index.html 上链接了所有资源:
<link rel="stylesheet"href="bower_components/bootstrap/dist/css/bootstrap.css">
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/angular-bootstrap/ui-bootstrap.min.js"></script>
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css">
<script src="bower_components/angular-modal-service/dst/angular-modal-service.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
我对 angularjs 很陌生,我不知道解决方案!
谢谢大家
【问题讨论】:
在您的app.js
中,您在两个依赖项 smart-table''angularModalService',
之间缺少逗号
在我的代码中存在逗号,它不仅存在于***部分,所以这不是错误。
@Andrea 我认为您必须添加 bootstrap.js 或 bootstrap/modal.js 作为依赖项。
查看页面底部“我正在使用 Bootstrap 模式,但对话框未显示”部分 - github.com/dwmkerr/angular-modal-service 也:github.com/dwmkerr/angular-modal-service/issues/14
我在 angular 之前加载了 bootstrap.js,但仍然得到“TypeError:modal.element.modal 不是函数”我什至可以在 HTML 中单击它并打开它,所以我知道 bootstrap。 js 正在加载。也许是版本不和谐?
【参考方案1】:
现在我遇到了类似的问题,并通过在 html 顶部添加以下脚本文件来修复它。 src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" src = "http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"
【讨论】:
【参考方案2】:我有同样的问题。交换脚本标签位置解决了我的问题。起初我在这个序列中有脚本标签
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
然后我改成这个了。
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
很多时候这些事情都会发生。由于在 jQuery 之前加载 AngularJS 而发生冲突。
【讨论】:
我缺少bootstrap.js
依赖项。【参考方案3】:
angularModalService 需要 bootstrap js 您已经加载了 bootstrap.js 和 jquery.js 你必须先加载 jquery.js 然后是 bootstarp.js 然后是 angular.js 。 所以你在 index.html 中链接的资源应该是..
<link rel="stylesheet"href="bower_components/bootstrap/dist/css/bootstrap.css">
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-bootstrap/ui-bootstrap.min.js"></script>
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css">
<script src="bower_components/angular-modal-service/dist/angular-modal-service.js"></script>
【讨论】:
【参考方案4】:是的,你只需要整理你的外部 js apis 第一个 -> jQuery.js 第二个 -> Boostrap.js -> Angular.js 这样的
<script src="../../resources/js/jquery.js" th:src="@/resources/js/jquery.js"></script>
<script src="../../resources/js/bootstrap.js" th:src="@/resources/js/bootstrap.js"></script>
<script src="../../resources/js/angular.js" th:src="@/resources/js/angular.js"></script>
<script src="../../resources/js/angular-modal-service.js" th:src="@/resources/js/angular-modal-service.js" ></script>
对不起这个标签“th:src”我正在使用百里香:)
【讨论】:
【参考方案5】:您好,这里是来自https://www.npmjs.com/package/angular-modal-service的正确详细解决方案
我正在使用 Bootstrap 模式,但没有显示对话框
输入的代码与示例完全相同,但是当 showAModal() 函数触发时,模态模板 html 会附加到正文中,而控制台输出:
TypeError: undefined is not a function 指向代码:modal.element.modal();。如果您使用的是 Bootstap 模式但未包含 Bootstrap JavaScript,则会发生这种情况。建议在 AngularJS 之前包含模态 JavaScript。
【讨论】:
【参考方案6】:文档不正确。我正在为示例提交 PR。
同时改成这样:
.then( function(modal)
modal.element.show();
);
【讨论】:
我们 4 年前的版本使用了modal.element.modal
,而今天的文档仍然写着modal.element.modal
。当前工作的 jsfiddle 也使用modal.element.modal
。您能否提供指向您所指问题或 PR 的链接?以上是关于Angular modal service 错误 - TypeError: modal.element.modal 不是函数的主要内容,如果未能解决你的问题,请参考以下文章
如何在 Angular 1.5 中将 Angular 组件与 ui.bootstrap.modal 一起使用?
Boostrap 4 Modal 不适用于 Angular 2