2016-08-09 11 views
3

ui.bootstrapを含めるにはどうすればいいですか?私はui.bootstrapを使ってng-clickにブートストラップモーダル(オープン)を開きます。その後、すべてのモーダルデータをサーバに送信したいのですが、これは私の角型コントローラに$httpを使用しています。しかし、それはエラーを与える。以下は私の角度のjsコードです。には、角度jsのuiブートストラップが含まれています

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; 
      }) 

     } else { 
      console.log('userform is not in scope'); 
     } 
    }; 

    $scope.cancel = function() { 
     $modalInstance.dismiss('cancel'); 
    }; 
}]) 
+0

を示すビューに自分のスクリプトを追加する必要がありますか? –

+0

@SatheeshSanthosh私は以下のエラーが発生しました..... [$ injector:modulerr] [$ injector:nomod]モジュール 'modalFormApp'が利用できませんので、モジュールmodalFormAppのインスタンス化に失敗しました!モジュール名のスペルが間違っているか、モジュール名を読み込めませんでした。モジュールを登録する場合は、依存関係を2番目の引数として指定するようにしてください。 – rock

答えて

0

「ui.bootstrap」には、「ngAnimate」と「ngTouch」という前提条件があります。あなたのモジュール

var app = angular.module("modalFormApp", ['ngAnimate','ngTouch','ui.bootstrap']); 

に追加する必要がありますし、どのようなエラーを

script(src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-animate.min.js") 
script(src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-touch.min.js") 
関連する問題