Angularjs 角度模态服务错误-类型错误:modal.element.modal不是函数
我有一个角度的问题 My app.js包括:Angularjs 角度模态服务错误-类型错误:modal.element.modal不是函数,angularjs,modal-dialog,Angularjs,Modal Dialog,我有一个角度的问题 My 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('Co
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>
当我尝试打开模式窗口时,页面上总是出现错误:
TypeError:modal.element.modal不是函数
在ricetta2.js:60
在processQueue(angular.js:13248)
在angular.js:13264
范围$get.Scope.$eval(angular.js:14466)
范围$get.Scope.$digest(angular.js:14282)
在作用域$get.Scope.$apply(angular.js:14571)
完成时(angular.js:9698)
完成任务时(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非常陌生,我不知道解决方案
谢谢大家文档不正确。我正在为这些例子提交一份PR 同时,对以下内容进行更改:
.then( function(modal)
{
modal.element.show();
});
我也有同样的问题。交换脚本标记位置解决了我的问题。起初,我在这个序列中有脚本标记
<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,因此会发生冲突。您好,下面是正确的详细解决方案 我使用的是引导模式,对话框没有显示 输入的代码与示例所示完全相同,但当showAModal()函数启动时,模式模板html将附加到主体中,同时控制台输出: TypeError:undefined不是函数
指向代码:modal.element.modal();。如果您使用的是Bootstap模式,但未包含引导JavaScript,则会发生这种情况。建议在AngularJS之前包含模式JavaScript。是的,您只需将外部js API整理好即可 第一个->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”,thymeleaf:)angularModalService需要引导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>
现在我遇到了类似的问题,通过在html顶部添加下面的脚本文件解决了这个问题。 src=”https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"
src=”“在你的
app.js
中,你的两个依赖项智能表“angularModalService”之间缺少一个逗号,
在我的代码中逗号存在,它不仅存在于stackoverflow部分,所以这不是错误。@Andrea我认为您必须添加bootstrap.js或bootstrap/modal.js作为依赖项。请查看页面底部的“我正在使用引导模式,对话框未显示”部分-另外:我在angular之前加载bootstrap.js,但仍然得到“TypeError:modal.element.modal不是函数”我甚至可以在HTML中点击它,它就会打开,所以我知道bootstrap.js正在加载。可能是版本不协调?我缺少了bootstrap.js
依赖项。我们4年前的版本使用了modal.element.modal
,今天的文档仍然显示modal.element.modal
。当前正在工作的JSFIDLE还使用modal.element.modal
。你能提供你所指的问题或公关的链接吗?
<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>