$http
とui.bootstrap
を含めるにはどうすればいいですか? 実際に私はui.bootstrap
を使ってブートストラップモーダル(オープン)を開きます。 ng-click
にあります。 その後、すべてのモーダルデータをサーバに送信したいと思います。これは、角度コントーラでhttpを使用しているためです。それはエラーを与える。 は、以下の私はapp.controller角度jsにhttpとuiのブートストラップを含める方法
で
$http
を注入するとき、私は、エラーの下になった私の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'); }; }])
は、[$インジェクター:modulerr]されています[$インジェクタに によるモジュールmodalFormAppをインスタンス化に失敗しました:nomod]モジュール 'modalFormApp'は利用できません! モジュール名のスペルが間違っているか、モジュール名を読み込めませんでした。 モジュールを登録する場合は、依存関係を 第2引数として指定するようにしてください。私の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を含めることができます –