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

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' /> 

这工作，但它的叶子时，输入应再次禁用我不知道...