Introduction:
Here I will explain how to open url in new browser window using AngularJS with custom height and width on button click example or AngularJS open new popup / browser window on button click or AngularJS open child window from parent window on button click with example. By using “$window.open” we can new popup browser window with custom size in AngularJS.
Description:
In previous articles I explained Angularjs convert number to currency format, Angularjs get dropdownlist selected value, Angularjs convert text to uppercase while typing, Angularjs refresh div for every 1 second using interval mode and many articles relating to AngularJS, jQuery, JavaScript and asp.net. Now I will explain how to open new browser window with custom height and width on button click using AngularJS.
In previous articles I explained Angularjs convert number to currency format, Angularjs get dropdownlist selected value, Angularjs convert text to uppercase while typing, Angularjs refresh div for every 1 second using interval mode and many articles relating to AngularJS, jQuery, JavaScript and asp.net. Now I will explain how to open new browser window with custom height and width on button click using AngularJS.
// Open New Child / Browser Window
$scope.openChildWindow = function
() {
var left = screen.width /
2 - 200, top = screen.height / 2 - 250
$window.open('http://www.aspdotnet-suresh.com',
'', "top="
+ top + ",left=" + left + ",width=400,height=500")
}
|
If you want to check it in complete example we need to
write the code like as shown below
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Angularjs Open New
Browser Window with Example</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
<script type="text/javascript">
var myApp =
angular.module('sampleapp', [])
myApp.controller("expressionController",
function ($scope,$window) {
// Open New Child / Browser Window
$scope.openChildWindow = function
() {
var left = screen.width /
2 - 200, top = screen.height / 2 - 250
$window.open('http://www.aspdotnet-suresh.com',
'', "top="
+ top + ",left=" + left + ",width=400,height=500")
}
});
</script>
</head>
<body>
<form id="form1"
runat="server">
<div data-ng-app="sampleapp"
data-ng-controller="expressionController">
<input type="button"
value="Open
Popup Window" ng-click="openChildWindow()"/> <br /><br />
</div>
</form>
</body>
</html>
|
Live
Demo
For
live demo click on below button to open new window
|
If you enjoyed this post, please support the blog below. It's FREE! Get the latest Asp.net, C#.net, VB.NET, jQuery, Plugins & Code Snippets for FREE by subscribing to our Facebook, Twitter, RSS feed, or by email. |
|||
Subscribe by RSS
Subscribe by Email
|
|||
2 comments :
Great :)
But if i want to open it in modal popup instead of new window how to do it?
Note: Only a member of this blog may post a comment.