Question

我在bootstrap模式中有一个表单。但是我无法使用范围变量获取控制器端的表单值。

https://plnkr.co/edit/FjKXUpoBDdvQqomI97ml?p=preview

我的原始代码也有另一个问题。当我点击提交按钮时，它将刷新整个页面并且提交功能没有执行。

我的表格：

<div class="modal-body">
                    <form class="form-horizontal" name="contact" ng-submit="contactForm()">
                        <div class="form-group">
                            <label class="col-lg-3 control-label">Name* :</label>
                            <div class="col-lg-8">
                                <input class="form-control" type="text" id="name" name="_name" ng-model="_name" > </div>
                        </div>
                        <div class="form-group">
                            <label class="col-lg-3 control-label">Email* :</label>
                            <div class="col-lg-8">
                                <input class="form-control" type="email" id="email" name="_email" ng-model="_email" required> </div>
                        </div>
                        <div class="form-group">
                            <label class="col-lg-3 control-label">Mobile* :</label>
                            <div class="col-lg-8 row">
                                <div class="col-lg-4">
                                    <input type="text" class="form-control" ng-model="_cc" placeholder="+91" name="_cc"> </div>
                                <div class="col-lg-8">
                                    <input class="form-control" type="text" ng-model="_mobile" maxlength="10" ng-pattern="/^[0-9]{5,10}$/" id="mobile" name="_mobile"></div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-lg-3 control-label">Message :</label>
                            <div class="col-lg-8">
                                <textarea class="form-control" rows="2" name="_condition" ng-model="_condition"></textarea>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-lg-offset-7 col-lg-5">
                        <button type="submit" class="btn btn-primary" id="contactSubmit" >Submit</button>
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                            </div></div>    
                    </form>
                </div>

控制器：

$scope.contactForm = function(){
console.log($scope._condition,$scope._name,$scope._email,$scope._cc,$scope._mobile);
};

Answer 1

你正在使用普通的jQuery方法打开模态，这种方法在Angular中不起作用，因为打开的模态没有连接到Angular应用程序，因此它不知道必须处理模态， HTML解析等等。

相反，您应该正确使用指令，或者在模态对话框的情况下，您可以简单地使用现有的指令，例如Angular UI项目，它为Angular带来了准备好的Bootstrap指令。在您的情况下，您需要$modal服务并注入$http服务以发布您的数据。

以下是使用angular-ui bootstrap的工作人员。

<强> PLUNKER： https://plnkr.co/edit/rjtHJl0udyE0PTMQJn6p?p=preview

<html ng-app="plunker">
  <head>
    <script src="https://code.angularjs.org/1.2.18/angular.js"></script>
    <script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.6.0.js"></script>
    <script src="script.js"></script>
    <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
  </head>
  <body>

<div ng-controller="ModalDemoCtrl">
    <script type="text/ng-template" id="myModalContent.html">
        <div class="modal-header">
            <h3>I'm a modal!</h3>
        </div>
        <form ng-submit="submit()">
          <div class="modal-body">
            <label>Email address:</label>
            <input type="email" ng-model="user.email" />
            <label>Password</label>
            <input type="password" ng-model="user.password" />
          </div>
          <div class="modal-footer">
              <button class="btn btn-warning" ng-click="cancel()">Cancel</button>
              <input type="submit" class="btn primary-btn" value="Submit" />
          </div>
        </form>
    </script>

    <button class="btn" ng-click="open()">Open Modal</button>
</div>
  </body>
</html>

<强> JS：

 angular.module('plunker', ['ui.bootstrap']);
var ModalDemoCtrl = function ($scope, $modal, $log,$http) {
    $scope.user = {
        email: '',
        password: null,
    };

    $scope.open = function () {
        $modal.open({
            templateUrl: 'myModalContent.html', // loads the template
            backdrop: true, // setting backdrop allows us to close the modal window on clicking outside the modal window
            windowClass: 'modal', // windowClass - additional CSS class(es) to be added to a modal window template
            controller: function ($scope, $modalInstance, $log, user) {
                $scope.user = user;
                $scope.submit = function () {
                    $log.log('Submiting user info.'); // kinda console logs this statement
                    $log.log(user);
                    $http({
                    method: 'POST', 
                    url: 'https://mytesturl.com/apihit',
                    headers: {
                        "Content-type": undefined
                    }
                    , data: user
                }).then(function (response) {
                    console.log(response);
                   $modalInstance.dismiss('cancel'); 
                }, function (response) {
                    console.log('i am in error');
                   $modalInstance.dismiss('cancel'); 
                    });
                    //$modalInstance.dismiss('cancel'); // dismiss(reason) - a method that can be used to dismiss a modal, passing a reason
                }
                $scope.cancel = function () {
                    $modalInstance.dismiss('cancel'); 
                };
            },
            resolve: {
                user: function () {
                    return $scope.user;
                }
            }
        });//end of modal.open
    }; // end of scope.open function
};

angularjs形成在bootstrap模态弹出窗口内

1 个答案: