使用Angular JS和Bootstrap清除Modal Popup上的文本字段

Question

我的页面上有一个按钮，打开一个模式对话框，其上有一个文本字段。我首次打开“模式”对话框，并在文本字段中放置一些文本并将其关闭。当我重新打开模式对话框时，文本字段内容保持原样。我想每次都得到空的文本字段。

编辑：

我的文本框是在其上显示一个模式对话框股利。此外，打开模式对话框时，该文本框不会获得焦点。以下是我的代码。

$scope.OpenModal = function() { 
 
\t \t //Popup the Modal Dialog Box 
 
\t \t $scope.modalTitle = "Confirm?"; 
 
\t \t $scope.note=null; 
 
\t \t $scope.modalShown = !$scope.modalShown; 
 
\t \t $scope.itemDesc=""; 
 
\t \t $scope.focusInput=true; 
 
\t \t 
 
\t \t $scope.ok = function() { 
 
\t \t \t $scope.Message = "Confirmed"; 
 
\t \t \t $scope.modalShown = false; 
 
\t \t \t $scope.focusInput = true; 
 
\t \t } 
 
\t \t 
 
\t \t $scope.cancel = function() { 
 
\t \t \t $scope.Message = "Cancelled"; 
 
\t \t \t $scope.modalShown = false; 
 
\t \t \t $scope.focusInput = true; 
 
\t \t } 
 
} 
 

 
app.directive('modalDialog', function() { 
 
    return { 
 
    restrict: 'E', 
 
    scope: { 
 
     show: '=' 
 
    }, 
 
    replace: true, // Replace with the template below 
 
    transclude: true, // we want to insert custom content inside the directive 
 
    link: function(scope, element, attrs) { 
 
     scope.dialogStyle = {}; 
 
     if (attrs.width) 
 
     scope.dialogStyle.width = attrs.width; 
 
     if (attrs.height) 
 
     scope.dialogStyle.height = attrs.height; 
 
     scope.hideModal = function() { 
 
     scope.show = false; 
 
     }; 
 
    }, 
 
    template: "<div class='ng-modal' ng-show='show'><div class='ng-modal-overlay'></div><div class='ng-modal-dialog' ng-style='dialogStyle'><div class='ng-modal-close close' ng-click='hideModal()'>x</div><div class='ng-modal-dialog-content' ng-transclude></div></div></div>" 
 
    }; 
 
}); 
 

 
app.directive('focusMe', function($timeout, $parse) { 
 
\t return { 
 
\t  link: function(scope, element, attrs) { 
 
\t  var model = $parse(attrs.focusMe); 
 
\t  scope.$watch(model, function(value) { 
 
\t   console.log('value=',value); 
 
\t   
 
\t   if(value === true) { 
 
\t   $timeout(function() { 
 
\t    element[0].focus(); 
 
\t   }, 20); 
 
\t   } 
 
\t  }); 
 
\t  element.bind('blur', function() { 
 
\t   console.log('blur') 
 
\t   scope.$apply(model.assign(scope, false)); 
 
\t  }) 
 
\t  } 
 
\t }; 
 
});

<button ng-click="OpenModal()" ng-disabled="isValid" 
 
\t role="button" > 
 
<span class="fa fa-ban"></span> Open 
 
</button> 
 
<modal-dialog show='modalShown' width='440px'> 
 
\t <div class="modal-header"> 
 
\t \t <h5 class="modal-title">{{modalTitle}}</h5> 
 
\t </div> 
 
\t <div class="modal-body"> 
 
\t  <p>{{modalMessage}} </p> 
 
<input type="text" focus-me="focusInput" id="txtDesc" ng-model="itemDesc" /> 
 
    </div> 
 
\t <div class="modal-footer"> 
 
\t \t <button ng-click="ok()" focus-me="true" >OK</button> 
 
\t \t <button ng-click="cancel()">Cancel</button> 
 
\t </div> 
 
</modal-dialog>

Answer 1

从描述，我可以建议你应该清除模式的文本字段，同时关闭模式。

从您的角度代码，你可以清除它很容易，可以说这是$ scope.modalText，

$scope.modalText = ""; 

中获取调用上接近模态的点击功能只需添加这条线。如果它不能解决问题，请分享您的代码。

更新：使用下面的代码更新您的取消功能。我刚才添加的代码以清除文本框

$scope.cancel = function() { 
       $scope.Message = "Cancelled"; 
       $scope.modalShown = false; 
       $scope.focusInput = true; 
       $scope.txtDesc = ""; 
      }