For a bit of background, I am trying to create a simple form that will allow a user to send a message. I am using ui-select2 to allow the user to search for the message recipient, but for some reason selecting the user doesn't update the necessary scope variable.
<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>
This is the relevant html code (which is a template for a directive) and here is the directive code:
.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";
}
}
})
I have tried the directive both with and without the link element and the scope element, but these changes didn't seem to make any difference. I have also attempted to output the contents of the message object, and while it does pick up changes to the content and the topic it doesn't pick up changes to the recipient. Also, I have successfully used ui-select2 elsewhere in my application so I am not sure what it different about this instance.
Let me know if you need any more information.
