我試圖設置我的應用程序的輸入文本框禁用,直到從右側單擊用戶名。我已經嘗試在輸入框中使用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
的UI不提供用戶名需要被選擇的指導。爲了創造更好的用戶體驗,考慮使用[ng-show和ng-hide](https://docs.angularjs.org/api/ng/directive/ngShow)來引導用戶,並且只有在用戶有完成了所需的步驟。 – georgeawg