2016-06-30 11 views
1

$httpui.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> 

+0

あなたはあなたのindex.htmlを含めることができます –

答えて

0

あなたmodalFormAppモジュールは、「hasn手段を受信して​​いるエラーを入力します。適切にロードされたこれはいくつかの異なる理由があります。しかし、あなたのコードに多くの問題があるように見えるので、伝えるのは難しいです。

私はすぐにスキミングで気づいた物事のカップル:

1行目:あなたが行の最後にこれら2つのアポストロフィを持っています。それらは何のため?

2行目:コールバック関数の前に、行の最後に '$ http'パラメータの後にコンマがありません。

コードをきれいに整理し、小さなインクリメントで作業してください。作成時にエラーをすばやく見つけて、見つかる可能性のある原因が少なくなるようにしてください。

+2

あなたに非常に感謝します..私の間違いがあります。 –

+1

あなたは大歓迎です。私はいつかいくつかの評判のポイントを得ることを望んでいるとして答えて質問をマークしてください:) – pzelenovic

+2

しかし、私はPHPにデータを送信することができません –

関連する問題