Question

我希望使用Angular UI在模态之间传递数据。这是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。提前致谢。

Answer 1

您可以使用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>

在Angular UI模式之间传递数据

1 个答案: