1
как включить $http и ui.bootstrap. Фактически я использую ui.bootstrap для открытия загрузочного модального (открытого). на ng-click. после этого я хочу отправить все модальные данные на сервер, для этого я использую http в угловом contaoller. но это дает ошибку. ниже мой угловой JS кодкак включить http и ui bootstrap в угловых 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');
};
}])
я получил ниже ошибки, когда я впрыснуть $http в app.controller
[$ инжектором: modulerr] Не удалось создать экземпляр модуля modalFormApp из-за к: [$ форсунка : nomod] Модуль 'modalFormApp' недоступен! Вы либо ошибочно написали имя модуля, либо забыли загрузить его. Если зарегистрировать модуль , убедитесь, что вы указываете зависимости как второй аргумент .
ниже моей index.html кода введите код здесь
<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>
Вы можете указать свой index.html –