Question

对于一些背景知识，我试图创建一个允许用户发送消息的简单表单。我使用ui-select2来允许用户搜索邮件收件人，但由于某种原因选择用户不会更新必要的范围变量。

<div ng-show="message_page == 'Compose'" ng-controller="userctrl" class="col-sm-9">
            <section class="panel">
                <header class="panel-heading wht-bg">
                   <h4 class="gen-case"> Compose Mail
                       <form action="#" class="pull-right mail-src-position">
                    </form>
                   </h4>
                </header>
                <div class="panel-body">
                    <div class="compose-mail">
                        <form role="form-horizontal" method="post">
                            <div class="form-group">
                                <label for="to" class="">To:</label>
                                <select style="min-width:150px" ui-select2 ng-model="message.recipient" data-placeholder="Who do you want to message?">
                                    <option ng-repeat="user in users" value="user.id">{{user.name}}</option>
                                </select>
                                {{message}}

                            </div>

                            <div class="form-group">
                                <label for="subject" class="">Subject:</label>
                                <input ng-model="message.subject" type="text" tabindex="1" id="subject" class="form-control">
                            </div>

                            <div class="compose-editor">
                                <textarea ng-model="message.content" class="wysihtml5 form-control" rows="9"></textarea>

                            </div>
                            <div class="compose-btn">
                                <button ng-click="send()" class="btn btn-primary btn-sm" onclick="$('#cc').parent().addClass('hidden'); $('#cc').focus();"><i class="fa fa-check"></i> Send</button>

                            </div>

                        </form>
                    </div>
                </div>
            </section>
        </div>
    </div>

这是相关的html代码（指令的模板），这是指令代码：

.directive('messageslist', function(){
    return{
        templateUrl: 'message-list-template.html',
        restrict: 'E',

        controller: function(Auth, $scope, $rootScope, $timeout, ListMessagesSvc, SingleMessageSvc, MessageCreateSvc){

            $scope.message = {};

            var messagesLoader = function(){
                ListMessagesSvc.query().$promise.then(function(data){
                    $rootScope.messages = $scope.messages = data;

                    var unread_messages_count = 0;
                    for(var i = 0; i < $scope.messages.length; i++){
                        if($scope.messages[i].type == "unread"){
                            unread_messages_count++;
                        }
                    }

                    console.log("There are " + unread_messages_count + " unread messages");

                    $rootScope.unread_messages_count = $scope.unread_messages_count = unread_messages_count;
                })


            }

            $scope.refresh_messages = function(){
                if(Auth.isAuthenticated()){
                        messagesLoader();
                }
            }

            $scope.open_message = function(message_id){
                console.log("The message is being opened" + message_id);
                SingleMessageSvc.get({id: message_id}).$promise.then(function(data){
                    $scope.current_message = data;
                })

                $scope.message_page = "Single";

            }

            $scope.inbox = function(){
                if(Auth.isAuthenticated()){
                        messagesLoader();
                    }
                $scope.message_page = "Inbox";
            }

            $scope.compose = function(){
                $scope.message_page = "Compose";
            }

            $scope.send = function(){

                console.log($scope.message);
                MessageCreateSvc.save($scope.message).$promise.then(function(data){
                    $scope.message = null;
                    $scope.message_page = "Inbox";
                });


            }

            $scope.discard = function(){
                $scope.message = null;
                $scope.message_page = "Inbox";
            }

            var infiniteLoop = function(){
                $timeout(function(){
                    if(Auth.isAuthenticated()){
                        messagesLoader();
                    }
                    infiniteLoop();

                }, 60000);
            }

            if(Auth.isAuthenticated()){
                        messagesLoader();
                }
            infiniteLoop();
            $scope.message_page = "Inbox";
        }
    }
})

我已尝试使用和不使用link元素和scope元素的指令，但这些更改似乎没有任何区别。我还尝试输出消息对象的内容，虽然它确实拾取了对内容和主题的更改，但它没有获取对收件人的更改。另外，我已经在我的应用程序的其他地方成功使用了ui-select2，所以我不确定这个实例有什么不同。

如果您需要更多信息，请与我们联系。

Answer 1

你必须改变这个：

value="user.id"

到此：

value="{{user.id}}"

或者这个：

ng-value="user.id"

否则所有值都将为'user.id'

Answer 2

对于遇到类似问题的任何人，请尝试删除控制器元素。解决了我的问题！

在范围内未检测到Angular ui-select2值

2 个答案: