angularjs с angular-ui модальной формой

Question

Привет, я новичок в angularJS, и я показываю модальную форму angular-ui, когда нажимаю на кнопку, и мне нужно добавить нового пользователя, но я действительно сбиваю с толку, как справиться с этим сценарием и как это сделать, и я попробовал приведенный ниже код, но это не так работа может кто-нибудь помочь мне лучше сделать это

Мое требование: я хочу открыть модальную форму для добавления нового пользователя, и когда я нажимаю кнопку «Сохранить», мне нужно добавить этого нового пользователя в мой массив

main.js

    // create the module, pass in modules it depends on
    var app = angular.module('myApp', ['ui.bootstrap']);
    // $modal service is now available via the ui.bootstrap module we passed in to our module
    app.controller('myController', ['$scope', '$uibModal', '$log',
        function ($scope, $uibModal, $log) {
            $scope.newUser = {};
            $scope.info = "";
            $scope.users = [
                { username: "rimon", fullName: "Md. Mamunur Rashid Rimon", email: "rimonmath@gmail.com" },
                { username: "shamim", fullName: "Md. Tamim Hossain", email: "shamim@gmail.com" },
                { username: "tamim", fullName: "Tamim Iqbal", email: "tamim@gmail.com" }
            ];

            $scope.addUser = function () {
                var modalInstance = $uibModal.open({
                    templateUrl: 'add_user.html',
                    controller: 'ModalInstanceCtrl',
                });
                modalInstance.result.then(function (selectedItem) {
                    $scope.selected = selectedItem;
                }, function () {
                    $log.info('Modal dismissed at: ' + new Date());
                });
            }

            $scope.saveUser = function () {
                console.log("Saving...");
                $scope.users.push($scope.newUser);
                $scope.info = "New User Added Successfully!";
                $scope.newUser = {};
            };

            $scope.selectUser = function (user) {
                $scope.clickedUser = user;
            };

            $scope.deleteUser = function () {
                console.log($scope.users.indexOf($scope.clickedUser));
                $scope.users.splice($scope.users.indexOf($scope.clickedUser), 1);
                $scope.info = "User Deleted Successfully!";
            };

            $scope.clearInfo = function () {
                $scope.info = "";
            };
        }]);


   angular.module('myApp').controller('ModalInstanceCtrl', function ($scope,$uibModalInstance) {
    $scope.saveUser = function () {
        alert("You clicked the ok button.");
        $uibModalInstance.close();
    };

    $scope.close = function () {
        alert("You clicked the cancel button.");
        $uibModalInstance.dismiss('cancel');
    };
});

form.html

<div>
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">New User Registration</h4>
    </div>
    <div class="modal-body">
        <form class="form-horizontal">
            <div class="form-group">
                <label for="inputEmail3" class="col-sm-2 control-label">Username</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" id="inputEmail3" placeholder="Username" ng-model="newUser.username">
                </div>
            </div>

            <div class="form-group">
                <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" id="inputEmail3" placeholder="Email" ng-model="newUser.email">
                </div>
            </div>

            <div class="form-group">
                <label for="inputEmail3" class="col-sm-2 control-label">Full Name</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" id="inputEmail3" placeholder="Full Name" ng-model="newUser.fullName">
                </div>
            </div>

            <div class="form-group">
                <div class="col-sm-offset-2 col-sm-10">
                    <button type="button" class="btn btn-default" data-dismiss="modal" ng-click="saveUser();">Save</button>
                </div>
            </div>
        </form>
    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-default" ng-click="close()">Close</button>
    </div>
</div>

Answer 1

Из того, что я вижу, ваша проблема заключается в объявлении FormController.js, попробуйте изменить этот код:

app.controller('ModalInstanceCtrl', ['$scope','$modalInstance',function ($scope, $modalInstance) {
   $scope.close = function () {
       $modalInstance.dismiss('cancel');
    };
  $scope.saveUser = function(){
         //SUBMIT FORM HERE
  }

}]);

на этот:

angular.module('ui.bootstrap.demo').controller('ModalInstanceCtrl', function ($uibModalInstance, data) 
{
  var pc = this;
  pc.data = data;

  pc.ok = function () {
    //{...}
    alert("You clicked the ok button."); 
    $uibModalInstance.close();
  };

  pc.cancel = function () {
    //{...}
    alert("You clicked the cancel button."); 
    $uibModalInstance.dismiss('cancel');
  };
});

Из вашего кодаЯ заметил, что:

1. В вашем объявлении модального контроллера отсутствует имя основного модуля приложения, которое иногда требуется.

2. , который вы используете'$ modalInstance' вместо $ uibModalInstance

Для дальнейшего ознакомления перейдите здесь .Пожалуйста, попробуйте эти изменения и дайте мне знать, если это работает!