Question

如何加入$http和ui.bootstrap。实际上我使用ui.bootstrap打开引导模式（打开）。在ng-click。之后，我想将所有模态数据发送到服务器，因为我在角度容器中使用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');
 };
   }])

当我在app.controller

中注入$http时出现以下错误

[$ injector：modulerr]无法实例化模块modalFormApp到期 to：[$ injector：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>

Answer 1

您收到的错误意味着您的modalFormApp模块未正确加载，这可能是出于几个原因。但是，很难说，因为您的代码中似乎有很多问题。

我通过快速浏览注意到了一些事情：

第1行：你在行尾有这两个撇号。它们用于什么？

第2行：在＆＃39; $ http＆＃39;之后，你错过了一个逗号。参数，在行的末尾，在回调函数之前。

尝试稍微整理一下代码，然后以较小的增量工作，以便在创建代码时能够快速捕获错误，并且可以找到一小部分可能的原因。

如何在角度js中包含http和ui bootstrap

1 个答案: