Angularjs中的嵌套ng控制器問題

Question

我陷入了奇怪的問題。其實我是從ajax獲取數據並在文本框中顯示它。

所以，基本上我有3個文本框（City，City1，City2）。默認城市文本框是可見的，如果他們有來自Ajax的數據，休息會顯示。

用戶可以通過單擊+按鈕添加城市或通過單擊 - 按鈕刪除。

我能夠在文本框上正確提取並顯示數據。

但是當我想通過點擊+按鈕添加/顯示City1或城市。它只是執行表單提交事件。

這是用於Ajax調用的代碼。

formApp.controller('getprofile', function($scope,$http){ 
    $http({ 
          url: 'get_job_city.php', 
          method: "GET", 
          params: {uid: uid} 
         }) 
        .success(function(data) { 

         if (data.success) { 

         $scope.formData.city1 = data.city1; 
        $scope.formData.city = data.city; 
         $scope.formData.city2 = data.city2;   
          } 
        }); 
        }) 

表單保存和顯示隱藏城市文本框的代碼。

var formApp = angular.module('formApp', []); 

    formApp.controller('formProfile1', function($scope,$http){ 

     $scope.secondcity1city1 = false; 
     $scope.thirdcity2 = false;  

    $scope.hidecity1 = function() { $scope.secondcity1 = false; } 
    $scope.hidecity2 = function() { $scope.thirdcity2 = false; }  

$scope.showcity = function() { $scope.secondcity1 = true; } 
$scope.showcity1 = function() { $scope.thirdcity2 = true; }  


     $scope.formData = {}; 

     $scope.formprofile1 = function() { 
      $scope.ajaxload = true; 
      var allData={'formData': $scope.formData, 'uid': uid} 
     $http({ 
       method : 'POST', 
       url  : 'city_update_exec.php', 
       data : allData, 
       headers : { 'Content-Type': 'application/x-www-form-urlencoded' } // set the headers 
      }) 
       .success(function(data) { 
      $scope.ajaxload = false; 
        if (!data.success) { 
         $scope.errorcity = data.errors.city; 
         $scope.errorcity1 = data.errors.city1; 
         $scope.errorcity2 = data.errors.city2;   


        }else{ 

        alert('City has been updated.'); 
        } 

       }); 


     }; 

    }) 

HTML代碼如下。

<div class="container" ng-controller="formProfile1"> 
    <form name="formProfile1" method="post" id="formProfile1" 
     ng-submit="formprofile1()" role="form"> 
    <div ng-controller ="getprofile">  
     <div id="firstcity"> 
     <div class="col-xs-10"> 
      <div class="topjob_resumetitle" ng-class="{ 'has-error' : errorcity }"> 
      <input name="city" id="city" type="text" 
        class="form-control textbox1 txt-auto" 
        required="required" placeholder="Job Location* " 
        ng-model="formData.city"> 
      <div class = "errorba" ng-show="errorcity">{{errorcity}} 
      </div> 
      </div> 
     </div> 
     <div class="col-xs-2"> 
      <!--<button class="remove" ng-click="removeChoice()">-</button>--> 
     </div> 


     <button class="addfields" ng-click="showcity()">+</button><br> 
     </div> 

     <div ng-show="secondcity1"> 
     <div class="col-xs-9"><div class="topjob_resumetitle" ng-class="{ 'has-error' : errorcity1 }"> 
      <input name="city1" id="city1" type="text" 
       class="form-control textbox1 txt-auto" 
       placeholder="Job Location* " ng-model="formData.city1"> 
      <div class = "errorba" ng-show="errorcity">{{errorcity1}} 
      </div> 
     </div> 
     </div> 
     <div class="col-xs-3"> 
     <button class="remove" ng-click="hidecity1()">-</button> 
     <button class="addfields" ng-click="showcity1()">+</button><br> 
     </div> 

    </div> 

    <div ng-show="thirdcity2"> 
     <div class="col-xs-10"><div class="topjob_resumetitle" 
      ng-class="{ 'has-error' : errorcity2 }"> 
     <input name="city2" id="city2" type="text" 
      class="form-control textbox1 txt-auto" 
      placeholder="Job Location* " 
      ng-model="formData.city2"> 
     <div class = "errorba" ng-show="errorcity2">{{errorcity2}} 
     </div> 
    </div> 
    </div> 
    <div class="col-xs-2"> 
    <button class="remove" ng-click="hidecity2()">-</button> 
    </div> 

     More text boxes are here 

</div> 

Answer 1

的問題在於你沒有爲你的按鈕設置一個類型，因此默認提交類型，當點擊時它將提交在DOM中找到的第一個父表單。爲了讓您的自定義點擊處理程序正確執行，改變你的按鈕類型「按鈕」，例如：

<button type="button" class="addfields" ng-click="showcity()">+</button><br>

Answer 2

要發出http請求，您不需要使用單獨的控制器。在您的代碼中使用工廠方法，並將其注入到控制器中作爲依賴項。請參閱Angular Factory method

Answer 3

Remove方法=「郵報」的形式標記添加的novalidate將停止HTML5驗證

<form name="formProfile1" novalidate id="formProfile1" 
    ng-submit="formprofile1()" role="form"> 

此外，如果它仍然沒有工作，然後更改所有的按鈕

<input type="button">//for rest of the buttons 
<input type="submit">//for submit button