禁用輸入框，直到錨鏈接點擊

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

這工作，但它的葉子時，輸入應再次禁用我不知道...