禁用输入框，直到单击锚链接

Question

我正在尝试将我的应用程序的输入文本框设置为禁用，直到从右侧单击用户名。我尝试在输入框上使用ng-disabled，但在单击链接之前无法将其设置为禁用。

我认为用户列表中的用户名需要设置一个模型来检查状态，但这似乎不起作用。

用户列表指令

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;
      }
    }
}
});

在用户点击用户指令中的链接之前，需要禁用带有文本输入的消息指令

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>"
        };
});

当前 plunker：LINK

Answer 1

你可以在你的控制器中有一个变量来表示其中一个链接是否被点击：

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

当您单击其中一个链接时，您在 usersList 指令中将其设置为 true。

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

最后，就像你说的，你的input 应该有一个ng-disabled 属性：

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

这可行，但让我想知道何时应该再次禁用输入...