Question

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

问题是$ scope似乎没有起作用，因为它没有在模态上显示用户数据。但是如果我在主用户页面的任何地方显示用户数据，它就可以正常工作。

我有这个控制器：

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和modal的范围属性。

我错过了什么？

Answer 1

问题是模态模板是在不会从$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"
    });
};

Answer 2

通常，模态会有自己的控制器，而不是指向它所调用的控制器。您可以将模型（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
                });

Modal上的控制器不能在AngularJS上运行

2 个答案: