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

带有文本输入的messages指令需要在用户点击来自用户指令的链接之前被禁用

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;
   //...
}

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

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

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

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

这有效，但它让我想知道什么时候应该再次禁用输入...

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

1 个答案: