Question

我的页面上有一个按钮，打开一个模式对话框，上面有一个文本字段。我是第一次打开模态对话框并在文本字段中放入一些文本并关闭它。当我重新打开模式对话框时，文本字段内容保持不变。我想每次都得到空文本字段。

编辑：

我的文本框位于Div上，显示为模态对话框。打开模态对话框时，该文本框也无法获得焦点。以下是我的代码。

＆＃13;

$scope.OpenModal = function() {
		//Popup the Modal Dialog Box
		$scope.modalTitle = "Confirm?";
		$scope.note=null;
		$scope.modalShown = !$scope.modalShown;
		$scope.itemDesc="";
		$scope.focusInput=true;
		
		$scope.ok = function () {
			$scope.Message = "Confirmed";
			$scope.modalShown = false;
			$scope.focusInput = true;
		}
		
		$scope.cancel = function () {
			$scope.Message = "Cancelled";
			$scope.modalShown = false;
			$scope.focusInput = true;
		}
}

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) {
	  return {
	    link: function(scope, element, attrs) {
	      var model = $parse(attrs.focusMe);
	      scope.$watch(model, function(value) {
	        console.log('value=',value);
	        
	        if(value === true) { 
	          $timeout(function() {
	            element[0].focus(); 
	          }, 20);
	        }
	      });
	      element.bind('blur', function() {
	        console.log('blur')
	        scope.$apply(model.assign(scope, false));
	      })
	    }
	  };
});

＆＃13;

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

＆＃13;

Answer 1

根据描述，我建议您在关闭模态时清除模态的文本字段。

从你的角度代码中，你可以很容易地清除它，让我们说它是$ scope.modalText，

 $scope.modalText = "";

只需在关闭模态单击时调用的函数中添加此行。如果无法解决问题，请分享您的代码。

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

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

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

1 个答案: