I'm trying to trigger a click on a link, but it only runs the ng-click
From MyScript.js:
$timeout(function () {
angular.element(document.querySelector('#cancelButton')).triggerHandler('click');
}, 0);
And from Index.cshtml:
<input class="popupButton" type="button" value="Anuluj" />
I know that the way I did with
<a...><input... /></a>
is wrong,
but the important thing is: how to it to click the link and the ng-click?
I have written a simple program to navigate to the link.
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
</head>
<body>
<div ng-app="app">
<div ng-controller="ctrl">
Redirect to Click Me!
</div>
</div>
<script src="../lib/angular.js"></script>
<script>
var app = angular.module('app', []);
app.controller('ctrl', function ($scope, $log, $window) {
$scope.redirect = function () {
var url = "http://www.google.com";
$window.location.href = url;
};
});
</script>
</body>
</html>
Is this what you wanted?
Related
I've been having a lot of problems recently trying to get my constructor work with my angular project so I created a test component. The code is supposed to toggle a message that says "hello test" by clicking a button. Please let me know why my constructor isn't responding.
<!DOCTYPE html>
<head>
<meta charset="UTF-8" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script type="text/javascript" src="app.component.js"></script>
</head>
<body>
<div ng-app="postEvent"
ng-controller="postCtrl">
<button> reg button test </button>
<button ng-click="toggle()"> toggle test </button>
<button ng-show="state"> state test </button>
</div>
</body>
// app.component.js
var postEvent = angular.module("postEvent", []);
postEvent.controller("postCtrl", function($scope) {
$scope.toggle = function () {
$scope.state = !$scope.state;
}
});
Remove
function ctrl($scope) {
}
which is unecessary here.
DEMO
<head>
<meta charset="UTF-8" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<div ng-app="postEvent" ng-controller="postCtrl"> <button ng-click="toggle()">test </button> <div ng-show="state" > hello test </div> </div>
<script type="text/javascript">
var postEvent = angular.module("postEvent", []);
postEvent.controller("postCtrl", function($scope) {
$scope.toggle = function () {
$scope.state = !$scope.state;
}
});
</script>
Am beginner in learning angular js,I need to know how to set the session values like user id, mail,username etc..
kindly tell me the efficient ways to set session values in angular js
thank you in advance
Reference link reference link
<html>
<head>
<title></title>
</head>
<body>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.1/angular.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/ngstorage/0.3.6/ngStorage.min.js"></script>
<script type="text/javascript">
var app = angular.module('MyApp', ["ngStorage"])
app.controller('MyController', function ($scope, $localStorage, $sessionStorage, $window) {
$scope.Save = function () {
$localStorage.LocalMessage = "LocalStorage: My name is Mudassar Khan.";
$sessionStorage.SessionMessage = "SessionStorage: My name is Mudassar Khan.";
}
$scope.Get = function () {
$window.alert($localStorage.LocalMessage + "\n" + $sessionStorage.SessionMessage);
}
});
</script>
<div ng-app="MyApp" ng-controller="MyController">
<input type="button" value="Save" ng-click="Save()" />
<input type="button" value="Get" ng-click="Get()" />
</div>
</body>
</html>
I have this button with data="test" when I mouseover the button I want to show the word test in {{Detail}} when I mouse out from the button {{Detail}} should show nothing.
</head>
<body ng-app="">
<button ng-mouseover="Detail = data" data="test" >MouseOver Me</button>
Details: {{Detail}}
</body>
</html>
<button ng-mouseover="Detail = data" ng-mouseleave="Detail=''" ng-init="data='test'" >
i think this code is useful for you
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script src="Scripts/angular.js"></script>
<script>
var app = angular.module('myApp', []);
app.controller('MyCtrl', function ($scope) {
$scope.data="test"
$scope.hoverIn = function () {
this.hoverEdit = true;
};
$scope.hoverOut = function () {
this.hoverEdit = false;
};
})
</script>
</head>
<body ng-app="myApp" ng-controller="MyCtrl" >
<button ng-mouseover="hoverIn()" ng-mouseleave="hoverOut()" title="{{data}}">MouseOver Me</button>
Details: <span ng-show="hoverEdit">{{data}}</span>
</body>
</html>
I have implemented a code to show a busy icon and this is it
angular.module("app", [])
.controller('UploadCtrl', function ctrl ($scope, $timeout) {
$scope.busy = false;
$scope.submit = function () {
$scope.busy = true;
// pretend to make an http call...
$timeout(function () {
$scope.busy = false;
}, 10000);
};
});
This is the index.html file
<!DOCTYPE html>
<html>
<head>
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js"></script>
<script src="app.js"></script>
<meta charset="utf-8">
<title>Busy Runner</title>
</head>
<body ng-app="app" ng-controller="ctrl">
<button ng-disabled="busy" ng-click="submit()">Submit <i class="fa fa-spinner fa-spin" ng-show="busy"></i></button>
</body>
</html>
When I run the code the busy loader keeps running. Please what could be wrong.
This is the plunk I have made.
view plunk
You reference a controller which not exists. Fix the HTML code
<body ng-app="app" ng-controller="UploadCtrl">
angular.module("app", [])
.controller('UploadCtrl', function ctrl ($scope, $timeout) {
$scope.busy = false;
In the above code you have name your controller as 'UploadCtrl' ,where as, in HTML file
<body ng-app="app" ng-controller="ctrl">
controller is 'ctrl' , due to which it can't load the controller hence the angular part is not executed.
Change your app.js to
angular.module("app", [])
.controller('ctrl', function ($scope, $timeout) {..}
View plunkr
Also I removed ng-disabled from <button ng-disabled="busy" ng-click="submit()">Submit since you are already using $scope.busy = false; as soon as script loads.
Checkout ngController .
I am newbie to Angular and web development, I have a text input area that needs to be selected (highlighted) when a button is clicked in Angular.
do I need to something like angular.element(document.getElelmentById(txt1)) and do select on it?
Similar to this thread:
Selecting all text in HTML text input when clicked , the question is, is there a rightway/better way to do this in Angular?
I have searched for an answer, closest I could get was this thread: How to set focus on input field? but couldn't successfully convert the suggestions for select().
Here is my jsfiddle in plain js: http://jsfiddle.net/x62ye14y/, a translation to angular would be greatly appreciated.
<!DOCTYPE html>
<html>
<body>
Select your favorite fruit:
<input type="text" id="id123" placeholder="ENTER VALUE">
<p>Click the button to select text in the textbox</p>
<button onclick="myFunction()">Select Txt</button>
<script>
function myFunction() {
document.getElementById("id123").select();
}
</script>
</body>
</html>
Here is the code I have so far,:
<!DOCTYPE html>
<html ng-app="demo">
<head lang="en">
<meta charset="utf-8">
<title>Custom Plunker</title>
</head>
<body>
<div ng-controller="DemoCtrl">
<input type="text" ng-model="content" id="txt1"/>
<button ng-click="selectOnClick()">Select Txt</button>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js">
</script>
<script type="text/javascript">
var mod1 = angular.module('demo', []);
mod1.controller('DemoCtrl', function ($scope) {
$scope.content = 'some text';
});
mod1.directive('selectOnClick', function () {
// Linker function
var element1 = angular.element("txt1");
element1.select();
});
</script>
</body>
</html>
http://plnkr.co/edit/DKxAs4QfkLzwAYPxx7tW?p=preview
Simple way to do is using click event.
for example
<input type = "text" (click) = "$event.target.select()">
Can you try this:
http://plnkr.co/edit/PzcINVKw6KNBFxlZUgAS?p=preview
<!DOCTYPE html>
<html ng-app="demo">
<head lang="en">
<meta charset="utf-8">
<title>Custom Plunker</title>
</head>
<body>
<div ng-controller="DemoCtrl">
<input type="text" ng-model="content" select-on-click />
<p>Content: {{content}}</p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
<script src="app.js"></script>
</body>
</html>
app:
(function (angular) {
var module = angular.module('demo', []);
module.controller('DemoCtrl', function ($scope) {
$scope.content = 'foobar';
});
module.directive('selectOnClick', function () {
// Linker function
return function (scope, element, attrs) {
element.bind('click', function () {
this.select();
});
};
});
}(angular));
you just need to move the select-on-click to a button