Disable input box until anchor link clicked

Question

I'm trying to set the input text box of my app to disabled until a username is clicked from the right side. I've tried using ng-disabled on the input box, but can't set it to disabled until a link is clicked.

I think the username in the users list need to have a model set to check for state, but that doesn't seem to have worked.

users list directive

chatApp.directive("usersList", function(){
return {
    restrict: "E",
    scope: false,
    template: "<p>Users</p>"+
        "<ol class='list-unstyled animated fadeInDown'>"+
          "<li ng-repeat='user in users'>"+
            "<a class='users' ng-click='toggleDetails(message)'>{{user.name | uppercase}}</a>"+
          "</li>"+
        "</ol>"
    ,
    link: function(scope) {
      scope.toggleDetails = function(message)
      {
        angular.forEach(scope.messages, function(value, key){
          if(message != value)
            value.showDetails = false;
        });
        message.showDetails =  !message.showDetails;
      }
    }
}
});

The messages directive with text input that needs to be disabled until user clicks link from users directive

chatApp.directive("messagesList", function(){
    return {
        restrict: "E",
        scope: false,
        template: "<div class='panel panel-primary'>"+
            "<div class='panel-heading'>"+
                "<span class='glyphicon glyphicon-comment'></span> Chat</div>"+
                "<div class='panel-body body-panel'>"+
                  "<ol class='list-unstyled'>"+
                    "<li ng-repeat='message in messages | filter:{showDetails:true}'>"+
                        "<p>{{message.user | uppercase}}: {{message.message}}</p>"+
                        "<p>Matt: {{response}}</p>"+
                        "<span ng-repeat='message in messages | filter:{showDetails:true}'>{{message.user | uppercase}}:</span>{{autoresponse}}"+
                    "</li>"+
                  "</ol>"+
                "</div>"+
                "<div class='panel-footer clearfix'>"+
                  "<form name='form'>"+
                    "<input type='text' name='message' ng-model='chat' class='form-control' />"+
                    "<span class='col-lg-6 col-lg-offset-3 col-md-6 col-md-offset-3 col-xs-12' style='margin-top: 10px'>"+
                        "<button class='btn btn-warning btn-lg btn-block' id='btn-chat' ng-click='sendMessage(messages)' ng-disabled='!form.message.$dirty'>Send</button>"+
                    "</span>"+
                  "</form>"+
                "</div>"+
        "</div>"
        };
});

Current plunker: LINK

Answer 1

You can have a variable in your controller that denotes whether one of the links has been clicked:

chatApp.controller("chatController",function($scope, $timeout, $firebaseArray)
{
   $scope.userSelected = false;
   //...
}

When you click on one of the links, you set this to true inside the usersList directive.

link: function(scope) {
   scope.toggleDetails = function(message)
   {
        scope.userSelected = true;
        // ...
   }

Finally, like you said, your input should have an ng-disabled attribute:

<input ng-disabled='!userSelected' />

This works but it leaves me wondering when the input should be disabled again...