控制器上的模态在AngularJS上不起作用

Controller on Modal not working on AngularJS

本文关键字：AngularJS 不起作用 模态 控制器      更新时间：2023-09-26

我有一个包含用户的主用户页面，如果您选择一个用户，将打开一个模态，并应显示用户信息。

问题是$作用域似乎没有工作，因为它没有显示模态上的用户数据。但是如果我在主用户页面的任何地方显示用户数据，它就会工作得很好。

我有这个控制器:

function userController($scope, $modal, $http, $rootScope) {
    var usrCtrl = this;
    $scope.users = null;
    $scope.openUserForm = function () {
        var modalInstance = $modal.open({
            templateUrl: 'views/modal_user_form.html',
            controller: userController,
            windowClass: "animated flipInY"
        });
    };
var session = JSON.parse(localStorage.session);
$http({
method: 'GET',
url: $rootScope.apiURL+'getAllClientUsers/'+session,
headers: {'Content-Type': 'application/x-www-form-urlencoded'}
}).success(function(response){
    if(response.ErrorMessage === null && response.Result !== null){
        $scope.users = response.Result; 
    }
});
//**This is the code that opens the modal
$scope.editViewUser = function(user){
    for (var key in $scope.users) {
        if($scope.users[key].SecUserId === user){
            $scope.selectedUser = $scope.users[key];
        }
    }
    $scope.openUserForm();
};

};

这个模态:

    <div ng-controller="userController">
<div class="inmodal">
    <div class="modal-header">
        <h4 class="modal-title">Create or Edit User</h4>
        <small class="font-bold">Use this modal to create or edit a user</small>
    </div>
    <div class="modal-body">
        <form method="get" class="form-horizontal">
                        <div class="form-group"><label class="col-sm-2 control-label">Nombre</label>
                            <div class="col-sm-10"><input ng-model="selectedUser.FirstName" type="text" class="form-control"></div>
                        </div>
                        <div class="form-group"><label class="col-sm-2 control-label">Apellido</label>
                            <div class="col-sm-10"><input ng-model="selectedUser.LastName" type="text" class="form-control"></div>
                        </div>
                        <div class="form-group"><label class="col-sm-2 control-label">Usuario</label>
                            <div class="col-sm-10"><input ng-model="selectedUser.UserName" type="text" class="form-control"></div>
                        </div>
                        <div class="form-group"><label class="col-sm-2 control-label">Email</label>
                            <div class="col-sm-10"><input ng-model="selectedUser.Email" type="email" class="form-control"></div>
                        </div>
                        <div class="form-group"><label class="col-sm-2 control-label">Activo</label>
                            <div class="col-sm-10">
                                <div><label> <input ng-model="selectedUser.FirstName" type="checkbox" value=""></label></div>
                            </div>
                        </div>
                        <div class="form-group"><label class="col-sm-2 control-label">Email Verificado</label>
                            <div class="col-sm-10">
                                <div><label> <input ng-model="selectedUser.FirstName" type="checkbox" value=""></label></div>
                            </div>
                        </div>
                        <div class="form-group"><label class="col-sm-2 control-label">Privilegios</label>
                            <div class="col-sm-10">
                                <select class="form-control m-b" name="account">
                                    <option ng-repeat="priv in selectedUser.EffectivePrivileges">{{ priv }}</option>
                                </select>
                            </div>
                        </div>
                    </form>
    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-white" ng-click="cancel()">Close</button>
        <button type="button" class="btn btn-primary" ng-click="ok()">Save changes</button>
    </div>
</div>
</div>

我尝试注入控制器，也使用ng-controller，和范围属性的模式。

我错过了什么?

问题是模态模板在范围内编译，不继承您的$scope。要在它们之间建立连接，你可以告诉modal为你的作用域创建一个新的子作用域:

$scope.openUserForm = function () {
    var modalInstance = $modal.open({
        scope: $scope, // <----- add this instruction
        templateUrl: 'views/modal_user_form.html',
        controller: userController,
        windowClass: "animated flipInY"
    });
};

一般来说，模态会有自己的控制器，而不是指向调用它的控制器。您将把模型(selectedUser)注入模态控制器，处理它，然后将它传递回父节点。此外，你可以给用户一个取消的选项，在这种情况下，不会对父控制器模型进行任何更改。

模态控制器:

app.controller('UserModalController', [
    '$scope',
    '$modalInstance',
    'selectedUser',
    function ($scope, $modalInstance, selectedUser) {
    $scope.selectedUser = selectedUser;
    $scope.cancel= function () {
        // user cancelled, return to parent controller
        $modalInstance.dismiss('cancel');
    };
    $scope.save = function () {
        // close modal, return model to parent controller
        $modalInstance.close($scope.selectedUser);
    };
]);

主控制器的变化:

                var modalInstance = $modal.open({
                  templateUrl: 'views/modal_user_form.html',
                  controller: 'UserModalController',
                  windowClass: "animated flipInY",
                  resolve: {
                    selectedUser: function() {
                      return $scope.selectedUser;
                    }
                  }
                });
                modalInstance.result.then(function(updatedUser) {
                  // deal with updated user
                }, function() {
                  // modal cancelled
                });
相关文章：