Question

我有以下代码。

HTML：

<div ng-controller="Test">
        <input type="text" class="message-input" id="testId" placeholder="Enter message" ng-model="textMessage" ng-disabled="isDisabled" autofocus />
        <br><br>
      <button type="submit" value="Submit" ng-click="enteredMessage(textMessage)">Submit</button>
     </div>

JS：

var app = angular.module('app',[]);
app.controller('Test',function($scope){
$scope.isDisabled = false;
    $scope.enteredMessage = function(msg){
    alert("Entered Message is: "+msg);
   console.log("your input should be in diabled mode now");
   $scope.isDisabled = true;
   console.log("your input should be in enabled mode now with auto-focused");
    }
});

如果我执行此操作，我可以默认自动聚焦输入一些文字，这很好。

意味着我希望在disable函数执行时input我的ng-click类型，然后在自动聚焦完成函数执行后它应该是enabled以输入文本

请让我知道我在哪里做错了以及如何做到这一点并提前致谢！创建了Fiddle。

Answer 1

实际上，当用户单击“确定”按钮或关闭它时，alert（）没有要执行的回调。您需要使用一些支持回调的模态或其他类型的指令，相反，下面的示例，只在显示警报时禁用，并在单击确定时启用。看看吧。

var app = angular.module('app',[]);

app.controller('Test',function($scope){
$scope.isDisabled = false;
    $scope.enteredMessage = function(msg){
    $scope.isDisabled = true;
    alert("Entered Message is: "+msg);
    console.log("your input should be in diabled mode now");

    //$scope.msg="";
     console.log("your input should be in enabled mode now with autofocus");
     $scope.isDisabled = false;
 }

});

我建议使用 ui.bootstrap 模式或 ngSweetAlert。

更新，使用函数调用而不是警报。 FIDDLE

  var app = angular.module('app',[]);

    app.controller('Test',function($scope, $window){
    $scope.isDisabled = false;
        $scope.enteredMessage = function(msg){
        $scope.isDisabled = true;
        alert("Entered Message is: "+msg);
        console.log("your input should be in diabled mode now");
        $scope.showConfirm();
        //$scope.msg="";
         //console.log("your input should be in enabled mode now with autofocus");
         //$scope.isDisabled = false;
      }

      $scope.showConfirm = function(){
          if(confirm('your input should be in enabled mode now with autofocus if click Ok')){
             $scope.isDisabled = false;
             var inputBox = $window.document.getElementById('testId');
        inputBox.focus();
          }
      }

    });

Answer 2

正如我在评论中提到的那样，Alert 已经禁用了您的UI，因此将输入置于禁用模式是没有用的。对于第二个问题，要在警报消失后重新关注输入，您可以执行以下操作

var app = angular.module('app', []);

app.controller('Test', function($scope, $window) {
  $scope.enteredMessage = function(msg) {
    alert("Entered Message is: " + msg);
    var inputBox = $window.document.getElementById('testId');
    inputBox.focus();
    console.log("your input should now be in focus");
  }
});

Answer 3

您可以使用超时功能，再次启用输入元素

示例：

var app = angular.module('app',[]);

app.controller('Test',function($scope,$timeout){
   $scope.isDisabled = false;
   $scope.enteredMessage = function(msg){
   $scope.isDisabled = true;
   alert("Entered Message is: "+msg);
   console.log("your input should be in diabled mode now");

    //5 seconds delay
    $timeout( function(){
        $scope.isDisabled = false;
       },5000);
    console.log("your input should be in enabled mode now with autofocus");
}

});

如何在函数执行时禁用和启用输入类型？

3 个答案: