Winkel-modal service-Fehler - TypeError: modal.element.modal ist keine Funktion
Problem habe ich mit einem Winkel modal service
Meine app.js enthält:
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
};
}]);
Dann 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>
Und der Hauptseite, öffnet sich modal windows
'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;
});
});
};
}]);
Wenn ich versuche zu öffnen Modale Fenster habe ich immer einen Fehler auf der Seite:
TypeError: modal.element.modal ist keine Funktion
bei ricetta2.js:60
bei processQueue (eckige.js:13248)
zu eckig.js:13264
bei Scope.$bekommen.Scope.$eval (eckige.js:14466)
bei Scope.$bekommen.Scope.$digest (eckige.js:14282)
bei Scope.$bekommen.Scope.$gelten (eckige.js:14571)
auf done (eckige.js:9698)
bei completeRequest (eckige.js:9888)
bei XMLHttpRequest.requestLoaded (eckige.js:9829)(anonyme Funktion) @ Winkel.js:11655$get @ Winkel.js:8596processQueue @ Winkel.js:13256(anonyme Funktion) @ Winkel.js:13264$bekommen.Scope.$eval @ Winkel.js:14466$bekommen.Scope.$digest @ Winkel.js:14282$bekommen.Scope.$anwenden von @ Winkel.js:14571done @ Winkel.js:9698completeRequest @ Winkel.js:9888requestLoaded @ Winkel.js:9829
Ich habe alle Ressourcen im Zusammenhang mit den auf der 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>
Ich bin sehr neu in angularjs und ich weiß nicht die Lösung!!!!
Danke an alle
app.js
Ihnen fehlt ein Komma zwischen zwei Abhängigkeiten smart-table''angularModalService',
in meinem code ein Komma vorhanden ist, ist es nicht nur bei stackoverflow Abschnitt, so ist dies nicht der Fehler .
Ich denke, man muss sich fügen bootstrap.js oder bootstrap/modal.js als depencency.
schauen unten auf der Seite "ich bin mit einem Bootstrap-Modal und der dialog wird nicht angezeigt" Abschnitt - github.com/dwmkerr/angular-modal-service, auch: github.com/dwmkerr/angular-modal-service/issues/14
Ich habe bootstrap.js laden bevor eckige bekommen und noch "TypeError: modal.element.modal ist keine Funktion" kann ich auch klicken Sie auf ihn in den HTML-Code und öffnet, so weiß ich, bootstrap.js ist laden. Vielleicht eine version Disharmonie?
InformationsquelleAutor Alberto | 2015-04-19
Du musst angemeldet sein, um einen Kommentar abzugeben.
Hatte ich dasselbe problem. Vertauschen Sie die script-tags Standorte ist mein problem gelöst. Zuerst hatte ich die script-tags in dieser Reihenfolge
Dann habe ich es geändert.
Viele Male diese Dinge passieren. Konflikte auftreten, weil der laden AngularJS, bevor jQuery.
bootstrap.js
Abhängigkeit.InformationsquelleAutor Akshay S. Pate
Die Dokumentation ist falsch. Ich bin die Einreichung einer PR für die Beispiele.
In der Zwischenzeit ändern:
InformationsquelleAutor FlavorScape
Hallo hier ist die richtige Lösung im Detail aus https://www.npmjs.com/package/angular-modal-service
Ich bin mit einem Bootstrap-Modal und der dialog nicht zeigen, bis
Code genau wie angezeigt eingegeben das Beispiel, aber wenn die showAModal () - Funktion löst die modal-Vorlage html angehängt wird, um den Körper, während die Konsole Ausgänge:
TypeError: undefined keine Funktion
Hinweis auf den code: modal.element.modal();. Dies tritt auf, wenn Sie eine Bootstap modal, haben aber nicht die Bootstrap-JavaScript. Die Empfehlung umfasst die modalen JavaScript vor AngularJS.
InformationsquelleAutor CALVIN MASHISHI
Ja, Sie müssen nur, um Ihre externe js-apis
first -> jQuery.js zweite -> Boostrap.js -> Angular.js wie diese
Sorry für diesen tag "th:src:" ich bin mit thymeleaf 🙂
InformationsquelleAutor arielduarte
angularModalService erfordert bootstrap-js
Sie bereits geladen bootstrap.js und jquery.js
Sie haben Last jquery.js ersten und dann bootstarp.js und dann angular.js .
Damit Ihre Ressourcen verknüpft index.html sollte..
InformationsquelleAutor Raj
Nun Stand ich vor ähnlichen Problem und es wurde behoben mit dem hinzufügen unterhalb der Skript-Dateien an der Spitze des 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"
InformationsquelleAutor user3583769