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

从您的代码中，我注意到：

您对模式控制器的声明缺少有时需要使用的主模块应用程序的名称。
您正在使用“ $ modalInstance”而不是$ uibModalInstance

有关更多参考，请转到here。请尝试这些更改，让我知道它是否有效！

具有angular-ui模态形式的angularjs

main.js

Form.html

1 个答案: