我的页面上有一个按钮,打开一个模式对话框,其上有一个文本字段。我首次打开“模式”对话框,并在文本字段中放置一些文本并将其关闭。当我重新打开模式对话框时,文本字段内容保持原样。我想每次都得到空的文本字段。使用Angular JS和Bootstrap清除Modal Popup上的文本字段
编辑:
我的文本框是在其上显示一个模式对话框股利。此外,打开模式对话框时,该文本框不会获得焦点。以下是我的代码。
$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>
把你的代码在这里,以便我们能够帮助更好地 – UltimateDevil
如果你有模态对象变量,你应该重新设置模态开/关。 '$ scope.modal = {};' –
你的意思是说这样吗? '' –