javascript - Modal 上的 Controller 不适用于 AngularJS

Question

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

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

我有这个 Controller :

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>

我尝试注入(inject) Controller 并使用 ng-controller 和 modal 的 scope 属性。

我错过了什么？

Answer 1

问题是模式模板是在不继承自 $scope 的范围内编译的。要在它们之间建立联系，您可以告诉模态创建您范围的新子范围:

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