I was bit worry about the auto-refresh functionality in angular js. I tried with time-out concept.It worked page was refreshing for time interval what I set.
app.controller('buildCtrl', ['$timeout', function($timeout) {
dataService.getAppData($scope.periodData).success(function(response) {
$scope.loading = false;
bc.serviceGridData = response.appdata;
$scope.data = response.appdata;
$timeout(function() {
dataService.getAppData($scope.periodData);
$state.reload();
}, 20000)
}
}]);
Now, I need a button to enable and disable (on/off) this $timeout functionality.If it is on the page need to refresh if it is off page should not refresh.The time interval needs to clear.
Can you please help me on this.How a single button can work to set this on/off functionality.
Thanks in Advance.
var app = angular.module( 'app', [ ] );
app.controller( 'MainCtrl', function( $scope,$timeout ) {
$scope.StartTimeOut=false;
$scope.ON_Off=function(isOn)
{
if(isOn)
{
alert("true")
}
else
{
alert("false")
}
}
} );
<!doctype html>
<html ng-app="app">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>
<body>
<div ng-controller="MainCtrl">
<input type="button" value="Click" ng-click=ON_Off(StartTimeOut=!StartTimeOut) />
</div>
<script src="app.js"></script>
</body>
</html>
You can write your timeout code in if and else part of function.
Related
When I use vscode in the window environment and type in the script part of the .html file and save it, the sentences are automatically arranged as I do not want, so I am worried.
enter image description here
<!DOCTYPE html>
<html>
<body>
<div id="root"></div>
</body>
<script src="https://unpkg.com/react#17.0.2/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom#17.0.2/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/#babel/standalone/babel.min.js"></script>
<script type="text/babel">
const root = document.getElementById("root");
let counter = 0;
function countUp() {
counter = counter + 1;
render();
}
function render() {
ReactDOM.render(<Container />, root);
}
function Container() {
return (
<div>
<h3>Total Clicks:{counter} </h3>
<button onClick={countUp}>Clock me</button>
</div>
);
}
render();
</script>
</html>
after saving
enter image description here
<!DOCTYPE html>
<html>
<body>
<div id="root"></div>
</body>
<script src="https://unpkg.com/react#17.0.2/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom#17.0.2/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/#babel/standalone/babel.min.js"></script>
<script type="text/babel">
const root = document.getElementById("root"); let counter = 0; function countUp() { counter = counter + 1; render(); } function render() { ReactDOM.render(
<Container />, root); } function Container() { return (
<div>
<h3>Total Clicks:{counter} </h3>
<button onClick={countUp}>Clock me</button>
</div>
); } render();
</script>
</html>
I did some searching and tried changing the formmater in the user settings in vscode but it still changed in a way I didn't want it to.
When I typed in js, automatic alignment was good, but when I typed in the script of the html file, the readability of the sentence was reduced Help me:(
do you installed any extension for sorting html files? if yes, then try to uninstall it.
I want to change the background of div that is clicked. So, how i can access $(this) div in angular?
My code is:
<div id="single" ng-click="changeit()">
foobar
</div>
And function is:
$scope.changeit=function($scope){
// jquery code $(this).css({"background":"#A4A4A4"});
// how in angular ?
}
You can pass the $event and use target to retrieve the current clicked element.
<div id="single" ng-click="changeit($event)">
asad
</div>
$scope.changeit = function ($event) {
$($event.target).css({ 'background': '#A4A4A4' });
}
Using a directive way, you could do it like this :
<div id="single" data-change-color>foobar</div>
And the changeColor directive which adds a click event on the element and changes the color when clicking on it.
(function () {
'use strict';
angular
.module('myModuleName')
.directive('changeColor', changeColor);
changeColor.$inject = [];
function changeColor () {
return {
restrict: 'A',
scope: {},
link: link
};
function link (scope, element) {
element.on('click', onClick(element));
}
function onClick (element) {
return function () {
element.css({ 'background': '#A4A4A4' });
}
}
}
}) ();
DOM manipulation should ideally be the sole domain of directives when using angular. This keeps us from gluing our controller logic into our DOM presentation which makes for a horrible mess. With this in mind Angular has two directives related to styling, ng-style and ng-class. Ng-class is demonstrated below.
https://docs.angularjs.org/api/ng/directive/ngStyle
https://docs.angularjs.org/api/ng/directive/ngClass
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js#1.4.3" data-semver="1.4.3" src="https://code.angularjs.org/1.4.3/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
<style>
.active{
background:red;
}
</style>
</head>
<body ng-controller="ctrl">
<button ng-click="activeButton = 1" ng-class="{'active' :activeButton==1}">Button 1</button>
<button ng-click="activeButton =2" ng-class="{'active' :activeButton==2}">Button 2</button>
<button ng-click="activeButton = 3" ng-class="{'active' :activeButton==3}">Button 3</button>
<script>
var app = angular.module("app",[]);
app.controller("ctrl",function(){});
angular.bootstrap(document,[app.name]);
</script>
</body>
</html>
How to observe property changes if I use dom-bind? The change in property is updated inside curly brackets, so I assume that there is some event related to change, but I don't know it's name.
Example:
<!doctype html>
<html lang="">
<head >
<link rel="import" href="bower_components/polymer/polymer.html">
<script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
<style>
</style>
</head>
<body>
<template is="dom-bind" id="app2">
<p>test: <span>{{test}}</span></p>
<input type="button" value="Change" on-click="chTest">
</template>
<script>
(function (document) {
'use strict';
var app = document.querySelector('#app2');
app.test = "original value";
app.addEventListener('test-changed', function () {
console.log('change listener fired');
});
app.addEventListener('dom-change', function () {
console.log("dom-change");
});
app.chTest = function () {
console.log('click');
app.test = "new value";
// notifyPath-setter will fire "test-changed"-event
// app.notifyPath("test", "notify value");
};
})(document);
</script>
</body>
</html>
EDIT:
There is a need to clarify my question: I want to invoke some function, when app.test changes.
You have the answer commented out. Comment the line app.test and uncomment the app.notifyPath
// app.test = "new value";
// notifyPath-setter will fire "test-changed"-event
app.notifyPath("test", "notify value");
Working jsbin below:
http://jsbin.com/vaqosi/edit?html,console,output
Edit: One workaround is to two way bind it into a child element and listen for its changes. I have updated the jsbin.
I'm trying to pass the message from comn.html window to comm.html window, but it doesn't pass
please tell me whether the code is correct or not. If not, kindly provide the exact code for that.
I want the code for passing message between windows not between iframes.
Code of comn.html:
<html>
<head>
<script>
window.onload = function()
{
var btn = document.getElementById('send');
btn.addEventListener('click', function sendMessage(e)
{
var string="Hi Adaptavant";
var new_win=window.open('comm.html');
new_win.postMessage(string,"*");
});
}
</script>
</head>
<body>
<button id="send" >Send Message</button>
</body>
</html>
Code of comm.html:
<html>
<head>
<title>postMessage</title>
<script type=text/javascript>
window.onload = function()
{
var msg = document.getElementById('message');
window.addEventListener("message",function receiveMessage(e) {
msg.innerHTML="msg received= " +e.data;
document.write("the message is " +msg);
}
</script>
</head>
<body>
<div id="message"></div>
</body>
</html>
If I run this program, my message isn't posting in another window.
What's the problem?
replace your script with this:
window.onload = function()
{
var msg = document.getElementById('message');
window.addEventListener('message', function(e) {
var message = e.data;
msg.innerHTML="msg received= " +e.data;
});
}
Let me know if it worked!
I want to update page for keyboard event.
I wired the keyboard event through $window.document.onkeydown. (I know this is not good but it is supposed to work)
However, I find that the page is not updating even the model is changed!
Where am I missing ?
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script>
function Main ($scope, $window) {
$scope.keyCode = 0;
$window.document.onkeydown = function (event) {
$scope.keyCode = event.keyCode;
console.log($scope.keyCode); //the model is changed here
};
}
</script>
</head>
<body ng-app>
<div ng-controller="Main">
{{keyCode}}
</div>
<script type="text/javascript" src="bower_components/angular/angular.js"></script>
</body>
</html>
---Edit---
Here is the code snippet you can try
http://plnkr.co/edit/DFUfHzQPla031IEDdCo3?p=preview
Whenever you want to execute an expression that is outside Angular's scope you need to let Angular know that a change has been made so it can perform a proper digest cycle. You can do this using the $scope.$apply() method. So your example becomes:
function Main ($scope, $window) {
$scope.keyCode = 0;
$window.document.onkeydown = function (event) {
$scope.$apply(function () {
$scope.keyCode = event.keyCode;
console.log($scope.keyCode);
});
};
}
Please see updated plunker here