如何开发一个按钮点击打开的弹出框(Angularjs)
问题描述:
任何人都可以引用链接或演示代码来使用angularjs开发弹出窗口。如何开发一个按钮点击打开的弹出框(Angularjs)
我试过下面的代码,但它不工作。
var myApp = angular.module('myApp', ['ngRoute', 'ngMap', 'ui.bootstrap']);
myApp.config(function($routeProvider, $locationProvider) {
$locationProvider.hashPrefix('');
$routeProvider
.when("/", {
templateUrl: "views/home.php",
controller: 'PopupDemoCont'
})
.when("/profile.php", {
templateUrl: "views/profile.php"
})
.otherwise({
redirectTo: "/"
});
});
myApp.controller("ImageController", ["$scope", function($scope) {
$scope.logoimage = "images/logo.png";
$scope.bgtextimage = "images/bgtextimage.png";
}]);
myApp.controller("PopupDemoCont", ["$scope", "$modal", function($scope, $modal) {
$scope.open = function() {
console.log('opening pop up');
var modalInstance = $modal.open({
templateUrl: 'views/popup.php',
controller: 'PopupCont'
});
};
}]);
myApp.controller("PopupCont", ["$scope", "$modalInstance", function($scope, $modalInstance) {
$scope.close = function() {
$modalInstance.dismiss('cancel');
};
}]);
在下面的html中,我设置ng控制器,但它不工作。
<div class="book_div">
<div class="book_content">
<p id="book-text">Facing Immigration
<br> Problems?
</p>
<p>Helpful Guid To Navigate Your Case</p>
<div class="hidden-sm hidden-xs"><img ng-src="{}" class="center-block img-responsive">
</div>
<a class="submit-button book_btn" ng-click="open()">Free download</a>
</div>
</div>
这是给错误:
[$injector:unpr].
答
您可以使用uibModalinstance。
按钮点击调用功能打开。开放功能
代码:
$scope.open = function(uuid,name){
var instance = $uibModal.open({
animation: $scope.animationsEnabled,
templateUrl: 'common/common/partials/delete-
confirm.tpl.html',
controller: function ($uibModalInstance,
$scope) {
$scope.name = Name;
$scope.icon = "fa-cogs";
$scope.description = "Yo have opened uib
Popup"
$scope.delete = function() {
$uibModalInstance.close($scope.deleteValue);
};
$scope.cancel = function() {
$uibModalInstance.dismiss('cancel');
};
}
});
}
我已经使用这个代码删除我的纪录。你可以在你的方式使用,如果你想利用弹出的响应,你可以使用:
instance.result.then(function (option) {
// Your code here
}, function() {
console.log('Modal dismissed at: ' + new Date());
});
HTML模板将是这样的:
<div class="modal-header gray_background">
<h4><b>Permanently Delete - <i class="fa {{icon}} folderIcon" aria-hidden="true"></i> {{name}} </b></h4>
</div>
<div class="modal-body">
<span data-ng-bind-html="description"></span>
<center style="margin-top: 10px;">
<div>Type "delete" to confirm
<input type="text" class="input" ng-model="deleteValue" required />
</div>
</center>
</div>
<div class="modal-footer gray_background">
<button class="btn btn-default" type="button" ng-click="cancel()">Cancel</button>
<button class="btn btn-danger" type="button" ng-click="delete()">Delete</button>
</div>
希望这将是有益的,如果您有任何进一步的查询你可以问。 谢谢!
其实你是在正确的轨道上,确保你使用的是最新的角度ui bootstrap库,并且它已经被包含在你的HTML里面了..还有 请在浏览器控制台中显示完整的错误信息 – Rahul
检出https:// angular-ui .github.io/bootstrap /#!#模式链接。最新的ui bootstrap模式有$ uibModal – Rahul