单击angularjs后禁用按钮
Posted
技术标签:
【中文标题】单击angularjs后禁用按钮【英文标题】：Disable button after click in angularjs 【发布时间】：2017-08-30 15:06:14 【问题描述】：我创建了一个通用对话框指令，用于显示创建、编辑、删除等表单。
它运行良好，但现在我需要禁用“创建”按钮，除非我收到来自 Web 服务的响应。这听起来很简单，但我创建这个指令的方式看起来很困难。
这是 plunkcer - http://plnkr.co/edit/Iecm2V3eDBkAYsSoXF9e
angular.module('productApp', [])
.controller("createProduct", function($scope, $timeout)
$scope.status = "loading";
$scope.createProduct = function ()
var newProduct = 'Title': $scope.Name ;
//datacontext.createProduct(newProduct)
// .then(function (data)
// location.path("/categories/" + data.data.CategoryID + "/products/" + data.data.ID, false);
// window.location.reload();
// )
// .finally(function ()
// $scope.$close();
// );
setTimeout(function() alert("product saved"); , 10000);
)
.directive("dlg", function()
return
transclude: true,
templateUrl: 'dialog.html',
scope:
dlgTitle: '@dlgTitle',
dlgPosText: '@dlgPosText',
dlgPosClick: '&dlgPosClick',
dlgIsValid: '=dlgIsValid'
,
link: function (scope, element, attrs)
scope.dlgNegClick = function (e)
$(".modal").click();
e.stopPropagation();
;
);<!DOCTYPE html>
<html ng-app="productApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular.min.js"></script>
<script src="app.js"></script>
</head>
<body>
<div ng-controller="createProduct">
<form role="form" name="productForm" dlg dlg-title="Create Product" dlg-pos-text="Create" dlg-pos-click="createProduct()" dlg-is-valid="productForm.$valid">
<div class="listrow">
<span class="listrow_label">Name</span>
<span>: </span>
<span class="listrow_value">
<input type="text" name="Name" data-ng-model="vm.Name" class="listrow_value" data-ng-required="true" style="width: 339px"></span>
<span data-ng-show="productForm.Name.$invalid" class="val-hl">*</span>
</div>
</form>
</div>
</body>
</html>
// dialog html
<html>
<head></head>
<body>
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" data-ng-click="dlgNegClick($event)">
<span aria-hidden="true">×</span>
<span class="sr-only">Close</span>
</button>
<h4 class="modal-title" id="myModalLabel"> dlgTitle </h4>
</div>
<div class="modal-body">
<div ng-transclude=""></div>
</div>
<div class="modal-footer">
<button type="button" class="btn thememainbg text-white" data-ng-disabled="!dlgIsValid" data-ng-click="dlgPosClick($event)">
dlgPosText
</button>
</div>
</body>
</html>【问题讨论】：
【参考方案1】：我更改了您的代码，请检查一次
angular.module('productApp', [])
.controller("createProduct", function($scope, $timeout)
$scope.status = "loading";
$scope.isUploading = false;
$scope.createProduct = function ()
$scope.isUploading = true;
var newProduct = 'Title': $scope.Name ;
//datacontext.createProduct(newProduct)
// .then(function (data)
// location.path("/categories/" + data.data.CategoryID + "/products/" + data.data.ID, false);
// window.location.reload();
// )
// .finally(function ()
// $scope.$close();
// );
setTimeout(function() alert("product saved"); $scope.isUploading = false;, 10000);
)
.directive("dlg", function()
return
transclude: true,
templateUrl: 'dialog.html',
scope:
dlgTitle: '@dlgTitle',
dlgPosText: '@dlgPosText',
dlgPosClick: '&dlgPosClick',
dlgIsValid: '=dlgIsValid'
,
link: function (scope, element, attrs)
scope.dlgNegClick = function (e)
$(".modal").click();
e.stopPropagation();
;
);
HTML代码：
<!DOCTYPE html>
<html ng-app="productApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular.min.js"></script>
<script src="app.js"></script>
</head>
<body>
<div ng-controller="createProduct">
<form role="form" name="productForm" dlg dlg-title="Create Product" dlg-pos-text="Create" dlg-pos-click="createProduct()" dlg-is-valid="productForm.$valid">
<div class="listrow">
<span class="listrow_label">Name</span>
<span>: </span>
<span class="listrow_value">
<input type="text" name="Name" data-ng-model="vm.Name" class="listrow_value" data-ng-required="true" style="width: 339px"></span>
<span data-ng-show="productForm.Name.$invalid" class="val-hl">*</span>
</div>
<button type="button" ng-click="createProduct()" ng-disabled="isUploading">isUploading?"Uploading":"upload"
</form>
</div>
</body>
</html>
http://plnkr.co/edit/8qiGMmeKk60EWzmKa3gj?p=preview
【讨论】：
感谢 ankit，但您的示例对我不起作用 anikit，谢谢，它现在来回更改 is-upload 但实际上并没有禁用创建按钮 感谢 ankit 它正在工作，但不是我希望它工作的方式，如果您在我的代码中看到我使用对话框作为模板，然后将控制器的选项注入其中，但是您的最新示例有一个创建表单中的按钮不是我想要的，我想在指令中保留创建按钮，以便我可以在不同的表单/控制器中使用它以上是关于单击angularjs后禁用按钮的主要内容，如果未能解决你的问题，请参考以下文章
即使在 angularjs 中禁用按钮，模态弹出窗口也会打开
Angularjs - 如何获得 ng-message required 错误以同时显示和禁用输入按钮