angularjs形式內部引導模式彈出

我有一個引導模式內的窗體。但我不能夠獲得控制器端形式的值與範圍變量。angularjs形式內部引導模式彈出

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

來源

2016-11-14 Harsh sachdev

擺脫bootstrap.js和使用的角度，用戶界面引導。不需要重新發明輪子。它也沒有jQuery的依賴，所以也可以擺脫這一點...你是在寫一個角度的應用程序或jQuery的應用程序？參見[thinking-in-angularjs-if-i-have-a-jquery-background]（http://stackoverflow.com/questions/14994391/thinking-in-angularjs-if-i-have-a-jquery-background ） – charlietfl

編寫一個角度的應用程序，但對於像這樣的$（'＃myModal'）的某些jquery功能。modal（'hide'）;我包括Jquery –

所以擺脫它，並忘記jQuery現在存在 – charlietfl

您正在使用普通jQuery的做法，是不會在角上班打開模式，因爲開模未連接到角應用，所以它不知道模態必須處理，HTML解析等。

相反，您應該正確使用指令，或者在模態對話框y您可以簡單地使用現有的，如Angular UI項目，它爲Angular帶來了準備好的Bootstrap指令。在您的情況下，您需要$modal服務並注入$http服務以發佈您的數據。

這是使用angular-ui bootstrap的工作plunker。

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

來源

2016-11-14 08:19:23

謝謝@ Alex Rumba Nicked，我會期待它。 –

@Harshsachdev你試過嗎？ –

是的，我正在努力。如果我想在5秒鐘之後的特定時間自動打開此模式彈出窗口，而不是點擊按鈕。 –

angularjs形式內部引導模式彈出

回答

相關問題