在角度用戶界面模式之間傳遞數據

我正在尋找使用角度用戶界面在模態之間傳遞數據。這裏是modalController，它定義了每個模態的控制器和視圖部分。在角度用戶界面模式之間傳遞數據

app.controller("modalController", function($scope, $modal){ 

$scope.registerOpen = function(size) { 

    var modalInstance = $modal.open({ 
     templateUrl: "templates/registrationModal.html", 
     controller: 'modalInstanceController', 
     size: size 
    }); 
}; 

$scope.categoriesOpen = function(size) { 

    var modalInstance = $modal.open({ 
     templateUrl: "templates/categoriesModal.html", 
     controller: 'modalInstanceController', 
     size: size 
    }); 
}; 

});

這裏是模態實例控制器，其被稱爲用於其處理關閉和打開模態

app.controller("modalInstanceController", function($scope, $modalInstance){ 

    $scope.ok = function() { 
     $modalInstance.close($scope.selected.item); 
    }; 

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

});

這裏是具有兩個嵌套的控制器寄存器模態體的各模態。模型formData指向registerFormController中的空對象。

註冊莫代爾美體：

<div class="modal-body" ng-controller="registerFormController"> 
     <div class="facebookButton"> 
      <div class="lucida">Sign In With Facebook</div> 
     </div> 

      <div class="registerForm" ng-controller="modalController"> 
       <input type="email" placeholder="Email" class="registerEmail block" ng-model="formData.email"> 

       <input type="password" placeholder="password" required class="registerPassword block" ng-model="formData.password"> 

       <input type="password" placeholder="password" name="password2" required ui-validate=" '$value==formData.password' " ui-validate-watch=" 'formData.password' "class="registerPassword2 block" ng-model="formData.password2"> 

       <span ng-show="registerForm.password2.$error.validator" class="block">Passwords do not match!</span> 

       <!-- ng-disabled="registerForm.$invalid" --> 
       <button type="button" class="create-account" ng-click="categoriesOpen('md')" >Next</button> 
      </div> 
      {{formData}} 
    </div>

分類莫代爾：

<div class="modal-body" ng-controller="registerFormController"> 
      <div class="registerForm"> 
       <label class="event-category" ng-model="formData.sports" btn-checkbox>Sports</label> 
       <label class="event-category" ng-model="formData.bars" btn-checkbox>Bars</label> 
       <label class="event-category" ng-model="formData.family" btn-checkbox>Family</label> 
       <label class="event-category" ng-model="formData.movies" btn-checkbox>Movies</label> 


       <button type="submit" ng-click="processForm(); confirmationOpen()" class="create-account" ng-disabled="registerForm.$invalid">Submit</button> 
      </div> 
      {{formData}} 
    </div>

這裏，在類別模態，{{FORMDATA}}並不反映從以前的模態的輸入值。我想我可能需要解決並將數據返回給控制器，將它傳遞給下一個，但不知道如何實現這一點。

最後registerFormController

app.controller('registerFormController', function($scope, $http){ 


$scope.formData = {}; 

$scope.processForm = function() { 
    $http({ 
     method: 'POST', 
     url: '/user', 
     data: $scope.formData, 
     headers: {"Content-Type": "application/json"} 
    }).success(function(data){ 

     if(!data) { 
      console.log('not working'); 
     } else if (data) { 
      console.log('successfully POSTing!'); 
     } 

    }); 
}; 

});

嗯...很抱歉的長期職位。有點新的棱角，所以我真的很感謝答覆和幫助。如果有必要，我可以將其轉換爲一個codepen。提前致謝。

來源

2014-10-03 cpk

您可以通過AngularJS服務在控制器之間共享數據。我做了一個簡單的例子：

<!doctype html> 
<html> 
    <head> 
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.js"></script> 
    </head> 
    <body ng-app="plunker"> 
     <div ng-controller="registerFormController"> 
      <h3>Register Form Controller</h3> 
      <input type="text" ng-model="formData.firstName"> 
      <br> 
      <input type="text" ng-model="formData.lastName"> 
      <br> 
      {{formData}} 
     </div> 
     <div ng-controller="modalInstanceController"> 
      <h3>Modal Instance Controller</h3> 
      <input type="text" ng-model="formData.firstName"> 
      <br> 
      <input type="text" ng-model="formData.lastName"> 
      <br> 
      {{formData}} 
     </div> 
     <script> 
      var app = angular.module('plunker', []); 
      app.controller('registerFormController', function($scope, registerDataService){ 
       $scope.formData = registerDataService.data; 
      }).controller("modalInstanceController", function($scope, registerDataService){ 
       $scope.formData = registerDataService.data; 
      }).factory('registerDataService', function() { 
       var registerDataService = {}; 
       registerDataService.data = { 
        'firstName': 'Kostya', 
        'lastName': 'Shkryob' 
       }; 

       return registerDataService; 
      }); 
     </script> 
    </body> 
</html>

來源

2014-10-03 18:50:17

Kostya，非常感謝。這對我的項目來說是非常寶貴的。謝謝。 – cpk 2014-10-03 19:08:35

在角度用戶界面模式之間傳遞數據

回答

相關問題