wie ich einschließlich $http und ui.bootstrap. tatsächlich verwende ich ui.bootstrap für das Öffnen des Bootstrap Modal (offen). auf ng-click. danach möchte ich alle modalen Daten an den Server senden, dafür benutze ich http in eckigen contaoller. aber es gibt Fehler. unter meinem Winkel js Code sindwie http und ui bootstrap in angular js
var app = angular.module("modalFormApp", ['ui.bootstrap']);``
app.controller("modalAccountFormController", ['$scope', '$modal','$log', '$http'
function ($scope, $modal, $log, $http) {
$scope.showForm = function() {
$scope.message = "Show Form Button Clicked";
console.log($scope.message);
var modalInstance = $modal.open({
templateUrl: 'modal-form.html',
controller: ModalInstanceCtrl,
scope: $scope,
resolve: {
userForm: function() {
return $scope.userForm;
}
}
});
modalInstance.result.then(function (selectedItem) {
$scope.selected = selectedItem;
}, function() {
$log.info('Modal dismissed at: ' + new Date());
});
};
}]);
app.controller('ModalInstanceCtrl', ['$scope', '$http', '$modalInstance',userForm, function($scope, $http, $modalInstance, userForm){
//var ModalInstanceCtrl = function ($scope, $modalInstance,$http, userForm) {
$scope.form = {}
$scope.url = 'submit.php';
$scope.submitForm = function() {
if ($scope.form.userForm.$valid) {
$http.post($scope.url, {"name": $scope.name, "email":
$scope.email, "message": $scope.message}).
success(function(data, status) {
console.log(data);
$scope.status = status;
$scope.data = data;
$scope.result = data;
})
//console.log('user form is in scope');
//$modalInstance.close('closed');
} else {
console.log('userform is not in scope');
}
};
$scope.cancel = function() {
$modalInstance.dismiss('cancel');
};
}])
i unten Fehler bekam, wenn ich $http in app.controller
injizieren [$ Injektor: modulerr] Fehler beim Modul modalFormApp aufgrund instanziiert: [$ Injektor : nomod] Modul 'modalFormApp' ist nicht verfügbar! Sie haben entweder den Modulnamen falsch geschrieben oder vergessen, ihn zu laden. Wenn ein Modul registriert wird, stellen Sie sicher, dass Sie die Abhängigkeiten als zweites Argument angeben.
unter meinem index.html Code Code eingeben hier
<head>
<meta charset="UTF-8">
<title>Angular Modal Forms</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<style>
body{ padding-top:30px; }
</style>
<!-- JS ===================== -->
<!-- load angular -->
<script src="http://code.angularjs.org/1.2.6/angular.js"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.9.0.js"></script>
<script src="app.js"></script>
</head>
<body ng-app="modalFormApp">
<div class="container">
<div class="col-sm-8 col-sm-offset-2">
<!-- PAGE HEADER -->
<div class="page-header">
<h1>AngularJS Form Validation</h1>
</div>
<div ng-controller="modalAccountFormController">
<div class="page-body">
<button class="btn btn-primary" ng-click="showForm()">Create Account</button>
</div>
</div>
</div>
können Sie Ihre index.html –