index.html
<html ng-app='myApp'>
<head>
<title>TODO supply a title</title>
<script src="js/angular.js" type="text/javascript"></script>
<script src="js/using built-in directives.js" type="text/javascript"></script>
</head>
<body>
<h1>Using ng-disabled directive</h1>
Name:<input type="text" ng-model="name"/>
<br/>
<button ng-disabled="!name" >sign in</button>
<hr/>
<h1>Button enabled after specified number of seconds </h1>
<button ng-disabled="isDisabled" >sign in</button>
</body>
</html>
using built-in directives.js
var app = angular.module('myApp',[]);
app.run(function($rootScope){
$rootScope.isDisabled = true;
setTimeout(function(){
$rootScope.isDisabled = false;
},3000);
In the beginning when page loads button stays disabled as it should but after 3 seconds it isn't enabled. Why is that?
When you use setTimeout, the model change is done outside angular context, therefore it does not trigger a digest.
Replace:
setTimeout(function(){
// ...
},3000);
with
$timeout(function(){
// ...
}, 3000);
Related
I have no idea about Angular.js. But want I want to do is
this
<head>
<script type="text/javascript">
function showAndroidToast(toast) {
Android.showToast(toast);
}
</script>
</head>
and this
<body>
<input type="button" value="Say hello" onClick="showAndroidToast('Hello Android!')" />
</body>
any idea?
Here is angular js code.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script>
angular.module('myApp', []).controller('namesCtrl', function($scope) {
$scope.showAndroidToast = function(toast) {
//write your code here to perform some action on calling this function
//Android.showToast(toast);
alert(toast);
console.log(toast);
}
})
</script>
</head>
<body ng-app="myApp" ng-controller="namesCtrl">
<input type="button" value="Say hello" ng-click="showAndroidToast('Hello Android!')" />
</body>
</html>
You should go through docs first of angular :
Its so simple as below :
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.showAndroidToast = function(toast) {
Android.showToast(toast); // Android should be inject as an dependency otherwise it would be undefined.
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="plunker" ng-controller="MainCtrl">
<input type="button" value="Say hello" ng-click="showAndroidToast('Hello Android!')" />
</body>
I managed to create a simple example for you. I was missing the Android class, so I tested it using the alert() function.
AngularJS 2
Plunkr Demo
Guidelines
AngularJS's Controller As and the vm Variable
File-closure and Strict mode
Angular Components
ngApp
ngController
ngClick
(function() {
"use strict";
function exampleController() {
var vm = this;
vm.showAndroidToast = showAndroidToast;
function showAndroidToast(message) {
alert(message); // replace this with your toast message
}
}
var app = angular.module("exampleApp", []);
app.controller("exampleController", exampleController);
})();
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>
<body ng-app="exampleApp" ng-controller="exampleController as vm">
<input type="button" value="Say hello" ng-click="vm.showAndroidToast('Hello Android!')" />
</body>
</html>
I am new on this field, and have tried this for a long time. You can see my simple version here:
https://plnkr.co/edit/YeahrG28bT2izX8gMKor?p=preview
Could you tell me why my onclick here doesn't work? My button is the 2signUp botton, Thanks!
js:
var app = angular.module('myApp', []);
app.controller('mainControl', function($scope) {
$scope.logged = false;
$scope.visiter = true;
var sub1 = document.getElementsByClassName("haha")[0];
sub1.onclick=function(){
$scope.logged = !$scope.logged;
}
})
html:
<!DOCTYPE html>
<html lang="en" ng-app='myApp'>
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="MainViewController.js"></script>
</head>
<body ng-controller="mainControl">
<div ng-show="logged">
<button>1Sign Up</button>
<button>Log In</button>
</div>
<div ng-show="visiter">
<button class="haha">2Sign Up</button>
<button>Log In</button>
</div>
<div ng-show="logged">
hello
</div>
</body>
Use the Angular way of handling click events, don't use any document.getElementById() jazz when you have angular to do the work for you.
This is why you should let angular handle it
Data Binding
Data-binding is an automatic way of updating the view whenever the model changes, as well as updating the model whenever the view changes. This is awesome because it eliminates DOM manipulation from the list of things you have to worry about.
https://angularjs.org/
Use Angular's ngClick
var app = angular.module('myApp', []);
app.controller('mainControl', function($scope) {
$scope.logged = false;
$scope.visiter = true;
$scope.signup = function() {
$scope.logged = !$scope.logged;
alert("ran the function");
}
})
<!DOCTYPE html>
<html lang="en" ng-app='myApp'>
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="MainViewController.js"></script>
</head>
<body ng-controller="mainControl">
<div ng-show="logged">
<button>1Sign Up</button>
<button>Log In</button>
</div>
<div ng-show="visiter">
<button id="haha" ng-click="signup()">2Sign Up</button> <!-- use ngClick here! -->
<button>Log In</button>
</div>
<div ng-show="logged">
hello
</div>
</body>
</html>
I'm trying to call a function in click function from my html page ,
added all typescript definition files from nuget but something is going wrong
My Click Function is not Working .... No error in console even
Here is my Hrml and Controller Code
Html Page
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="Scripts/angular.js"></script>
<script src="test.js"></script>
<title></title>
</head>
<body ng-app="testModule">
<div ng-controller="test">
<input type="button" ng-click="click()" value="test" />
</div>
</body>
</html>
Controller
angular.module("testModule", []);
class test {
constructor() { }
click() {
alert();
}
}
angular.module("testModule").controller("test", test );
This does not work because ng-click="click()" tries to call $scope.click() which is not defined.
I would highly advise you to use the controller as-Syntax when working with AngularJS and Typescript
Demo
Here is the corrected code. Don't mark this as the answer, #Aides got here before me.
Html Page
<!DOCTYPE html>
<html> <!-- its 2016 -->
<head>
<script src="Scripts/angular.js"></script>
<script src="test.js"></script>
<title></title>
</head>
<body ng-app="testModule">
<div ng-controller="Test as test">
<input type="button" ng-click="test.click()" value="test" />
</div>
</body>
</html>
Controller
angular.module("testModule", []);
class Test {
click() {
alert();
}
}
angular.module("testModule").controller("Test", Test );
I want to pass a parameter to the next page onclick of a button.
I have tried as below; on the first page I have a textarea and I want to pass that value to the next page on button click using AngularJS, I have tried as below, but it's not working.
index.html
<!doctype html>
<html ng-app="project">
<head>
<title>Angular: Service example</title>
<script src="http://code.angularjs.org/angular-1.0.1.js"></script>
<script src="sample.js"></script>
</head>
<body>
<div ng-controller="FirstCtrl">
<h2>{{name}}</h2>
<input ng-model="thing.x"/>
</div>
<input type="button" value="send" onclick="send()">
<script>
function send(){
window.location ="second.html";
}
</script>
</body>
</html>
sample.js
/*
* To change this license header, choose License Headers in Project Properties.
* To change this template file, choose Tools | Templates
* and open the template in the editor.
*/
var projectModule = angular.module('project',[]);
projectModule.factory('theService', function() {
return {
thing : {
x : 100
}
};
});
function FirstCtrl($scope, theService) {
$scope.thing = theService.thing;
$scope.name = "First Controller";
}
function SecondCtrl($scope, theService) {
$scope.someThing = theService.thing;
$scope.name = "Second Controller!";
}
second.html
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
<title>Passed data</title>
<script src="sample.js"></script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
</head>
<body>
<div ng-controller="SecondCtrl">
<h2>{{name}}</h2>
<input ng-model="someThing.x"/>
</div>
<br>
</body>
</html>
Please can you help me to figure it out?
First read this https://docs.angularjs.org/guide/$location
Remove send() function
function FirstCtrl($scope, $location, theService) {
$scope.thing = theService.thing;
$scope.name = "First Controller";
$scope.send = function(){
$location.path('/second').search({id: 12});
};
}
<input type="button" value="send" ng-click="send()">
To send the parameter to next page you have to use $location service.
$location.path('/second').search({id: 12});
But again this will not work for you as you are not using AngularJS for routing , you are using JS for that. I suggest following this PhoneCatApp to learn Angular basics
I have angularjs application and <span> in it. I try to hide it with ng-hide directive, but:
<span ng-hide="hideSpan">
And
// controller code here
....
$scope.hideSpan = true;
....
Doesn't work, it's ignoring. And if i make:
// controller code here
....
$scope.$apply(function(){$scope.hideSpan = true});
....
I get error: $apply already in progress.
How can i correctly use ng-hide/ng-show in this way?
Thank you.
You should be able to directly control the hide/show functions from your controller just as you show. The following is working example using a button to trigger toggling of hide show.
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js#1.1.5" data-semver="1.1.5" src="http://code.angularjs.org/1.1.5/angular.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-app="myapp" ng-controller="mycontroller">
<span ng-hide="hideSpan">Some Content to hide</span>
<button ng-click="toggleHide()"/>Toggle Hide</button>
</body>
</html>
And the script.
angular.module('myapp', []).controller('mycontroller', function($scope){
$scope.hideSpan = true;
$scope.toggleHide = function(){
if($scope.hideSpan === true){
$scope.hideSpan = false;
}
else{
$scope.hideSpan = true;
}
}
});
I've created a simple plunker to show this in action at http://plnkr.co/edit/50SYs0Nys7TWmJS2hUBt?p=preview.
As far as why the $apply is causing an error, this is to be expected as direct scope (provided by the $scopeProvider) variable operations are already watching for change and wrapped into a default apply of sorts in core angular so any change will be automatically applied to the other bindings of that variable.
you can just change the hideSpan value in ng-click, save few lines. cheers
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js#1.1.5" data-semver="1.1.5" src="http://code.angularjs.org/1.1.5/angular.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-app="myapp" ng-controller="mycontroller">
<span ng-hide="hideSpan">Some Content to hide</span>
<button ng-click="hideSpan=!hideSpan"/>Toggle Hide</button>
</body>