i have routeProvider, ng-view and controller.
Simple template with form and input. I can see $dirty value in {{form.var1.$dirty}} - it changes when i type, but how to access it in the controller code?
html main
<!doctype html>
<html ng-app="project">
<head>
<meta charset="utf-8">
<title>Tabs</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="lib/angular/angular.js"></script>
<script src="js/dirty.js"></script>
<!--<script src="js/tab.js"></script>-->
</head><body>
<div ng-view>
</div>
</body>
</html>
template
{{2+2}}<br>
|{{var1}}|<br>
|{{form.var1.$dirty}}|
check dirty
<form class="form-horizontal" novalidate name="form" ng-submit="submit()">
<input id="var1" name="var1" class="input" type="text" ng-model="var1">
</form>
js
angular.module('project',[]).
config(function($routeProvider) {
$routeProvider.
when('/', {controller:Ctrl1, templateUrl:'dirty_tab.html'}).
when('/tab1', {controller:Ctrl1, templateUrl:'dirty_tab.html'}).
otherwise({redirectTo:'/'});
});
function Ctrl1($scope,$rootScope) {
$scope.var1=100;
$scope.dodo1 = function() {
alert(form.var1.$dirty);
}
}
Alert shows me "undefined".
How to get var1 $dirty value?
As Cherniv told you in the comments you need to access the variable from the $scope object
$scope.form.var1.$dirty
Related
I am trying to create a link where I click the register button and it goes onto the register.html, without it needing for the page to start reloading. But when I click the register link, nothing seems to happen when I click it.
index.html:
<!DOCTYPE html >
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-route.js"></script>
<script src="app.js"></script>
</head>
<body ng-app="myApp" ng-controller="Login">
<label for="login">Login</label>
<input id="login" ng-model="login" type="text">
<br>
<label for="password">Password</label>
<input id="password" ng-model="password" type="text">
<br>
<button type="button" ng-click="login()">Login</button>
<a href="#!register" >Register</a>
<div ng-view></div>
</body>
</html>
app.js:
var app=angular.module("myApp",["ngRoute"]);
app.config(function ($routeProvider) {
$routeProvider
.when("/",{
templateUrl:"index.html",
})
.when("/register",{
templateUrl:"register.html",
controller:"Registration"
});
})
app.controller('Login',['$scope', function ($scope) {
}])
app.controller("Registration", function ($scope) {
$scope.msg = "I love London";
});
register.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<h1>Registration page</h1>
</head>
<body ng-app="myApp" ng-controller="Registration">
</body>
</html>
You should fix your link to:
Register
Check documentation for details $route#examples
I am trying to create an angular application from scratch. I have been trying to solve this for hours now, but I couldn't make it work.
All the following files are placed inside a parent folder.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Hello</title>
<script data-require="angular.js#1.6.0" data-semver="1.6.0" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-app="app">
<h1>Student App</h1>
<section ng-controller="HelloController">
<h4>Enter Student Details</h4>
<label for="name">Name :</label>
<input id="name" type="text" ng-model="student.name" />
<p>Hello {{student.name}}!</p>
</section>
<button id="name" type="submit" ng-click="onButtonClick()">Click</button>
</body>
</html>
HelloController.js
angular.module('app', [])
.controller('HelloController', ["$scope", function($scope) {
$scope.onButtonClick = function()
{
console.log("method invoked");
};
}]);
It would be nice if someone could help me solve this problem I am facing.
Your button is out of the <section> controlled by the controller. So clicking on it calls onButtonClick() on the root scope, not on te controller's scope.
I have a html file
<!doctype html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>Angular Registration</title>
<meta name="viewport" content="width=device-width, user-scalable=no">
<link href='https://fonts.googleapis.com/css?family=Lato:400,100,700,900' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/style.css">
<script src="js/lib/angular/angular.min.js"></script>
<script src="js/lib/angular/angular-route.min.js"></script>
<script src="js/lib/angular/angular-animate.min.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers/registration.js"></script>
</head>
<body>
<header></header>
<div class="page">
<main class="cf" ng-view>
{{message}}</main>
</div>
</body>
</html>
Then I have app.js where i implement route providers.
var myApp = angular.module('myApp',['ngRoute']);
myApp.config(['$routeProvider',function($routeProvider){
$routeProvider.
when('/login',{
templateUrl:'views/login.html',
controller:'RegistrationController'
}).
when('/register',{
templateUrl: 'views/register.html',
controller: 'RegistrationController'
}).
when('/success',{
templateUrl: 'views/success.html',
controller: 'SuccessController'
}).
otherwise({
redirectTo:'/login'
});
}]);
Then I have a registration.js where I implement the controller
myApp.controller('RegistrationController',['$scope',function($scope){
$scope.message="Welcome to my app";
}]);
this is the view file I am referring to:
<section class="card login">
<form name="myform"
novalidate>
<div class="textintro">
<h1>Hi there!</h1>
<p>Log-in to access the awesomeness!</p>
<p>{{message}}</p>
</div>
<fieldset>
<input type="email" name="email" placeholder="Email">
<input type="password" name="password" placeholder="Password">
</fieldset>
<button type="submit" class="btn">Login</button>
<p>or register</p>
</form>
</section>
The {{message}} is displayed as it is when I run the website !! I checked the console it says failed to load the module, what might be my mistake here or how can I solve this
Is your controller in the same file as the route config or it is separate file?
If it is in an extra file you have to replace
myApp.controller('RegistrationController',['$scope',function($scope){
with
angular.module('myApp').controller('RegistrationController',['$scope',function($scope){
If it is in the same file, please post the error message here
I was just following an AngularJS tutorial online, and basically they gave the following FIDDLE as an example. Now I tried the example locally and it doesn't work. My HTML looks like the below:
<!doctype html>
<html class="no-js" lang="" ng-app="" >
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Title</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<!-- Place favicon.ico in the root directory -->
<link rel="stylesheet" href="css/style.css">
<script type="text/javascript"
src="https://code.angularjs.org/1.0.1/angular-1.0.1.js"></script>
<script type="text/javascript"
src="script.js"></script>
</head>
<body>
<!--[if lt IE 8]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience.</p>
<![endif]-->
<div ng-controller="MyCtrl">
<h2>Parent Scope</h2>
<input ng-model="foo"> <i>// Update to see how parent scope interacts with component scope</i>
<br><br>
<!-- attribute-foo binds to a DOM attribute which is always
a string. That is why we are wrapping it in curly braces so
that it can be interpolated.
-->
<my-component attribute-foo="{{foo}}" binding-foo="foo"
isolated-expression-foo="updateFoo(newFoo)" >
<h2>Attribute</h2>
<div>
<strong>get:</strong> {{isolatedAttributeFoo}}
</div>
<div>
<strong>set:</strong> <input ng-model="isolatedAttributeFoo">
<i>// This does not update the parent scope.</i>
</div>
<h2>Binding</h2>
<div>
<strong>get:</strong> {{isolatedBindingFoo}}
</div>
<div>
<strong>set:</strong> <input ng-model="isolatedBindingFoo">
<i>// This does update the parent scope.</i>
</div>
<h2>Expression</h2>
<div>
<input ng-model="isolatedFoo">
<button class="btn" ng-click="isolatedExpressionFoo({newFoo:isolatedFoo})">Submit</button>
<i>// And this calls a function on the parent scope.</i>
</div>
</my-component>
</div>
</body>
</html>
And my script.js file looks like below:
var myModule = angular.module('myModule', [])
.directive('myComponent', function () {
return {
restrict:'E',
scope:{
/* NOTE: Normally I would set my attributes and bindings
to be the same name but I wanted to delineate between
parent and isolated scope. */
isolatedAttributeFoo:'#attributeFoo',
isolatedBindingFoo:'=bindingFoo',
isolatedExpressionFoo:'&'
}
};
})
.controller('MyCtrl', ['$scope', function ($scope) {
$scope.foo = 'Hello!';
$scope.updateFoo = function (newFoo) {
$scope.foo = newFoo;
}
}]);
Now why is my example not working locally? What am I doing wrong?
I do get an error in the console with the following:
Error: Argument 'MyCtrl' is not a function, got undefined
at Error (native)
at $a (http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js:16:488)
at qa (http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js:17:56)
at $get (http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js:52:219)
at http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js:43:348
at m (http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js:6:494)
at i (http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js:43:213)
at e (http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js:39:307)
at e (http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js:39:324)
at e (http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js:39:324)
Works fine for me, I'm only insert the module name to ng-app tag: myModule
<html class="no-js" lang="" ng-app="myModule" >
Trying to do simple thing in AngularJS: form->if you put right word->button appears->u can click and go to a different page;(i didn;t try to put a link to the button since it doesn;t appear even without a link)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="foundation.min.css">
</head>
<body ng-app="myApp">
<div ng-controller="MyCtrl">
<input type="text" ng-model="MyCtrl.pass">
<div class="button" ng-show="kPass">click me</div>
</div>
<script src="angular.js"></script>
<script src="app.js"></script>
</body>
</html>
and the js
angular.module('myApp', [])
.controller('MyCtrl', MyCtrl)
function MyCtrl($scope){
$scope.kPass = false;
$scope.pass = "empty";
$scope.$watch($scope.pass,function(){
if($scope.pass == "parola"){
$scope.kPass = !$scope.kPass;
}
})
};
problem: if i type in parola, the button does not appear
i am new to java script. thanks !
You should first read some angular tutorials, you have totaly wrong access to scope and you are using wrong $watch
angular.module('myApp', [])
.controller('MyCtrl', MyCtrl)
function MyCtrl($scope){
$scope.kPass = false;
$scope.pass = "empty";
$scope.$watch('pass',function(){
if($scope.pass == "parola"){
$scope.kPass = !$scope.Kpass;
}
})
};
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="foundation.min.css">
</head>
<body ng-app="myApp" ng-controller="MyCtrl">
<div>
<input type="text" ng-model="pass">
<div class="button" ng-show="kPass">click me</div>
</div>
<script src="angular.js"></script>
<script src="app.js"></script>
</body>
</html>
And next thing, you are overkilling your code. You can inline it in template without any controller function
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="foundation.min.css">
</head>
<body ng-app="myApp">
<div >
<input type="text" ng-model="pass">
<div class="button" ng-show="pass == 'parola' ">click me</div>
</div>
<script src="angular.js"></script>
<script src="app.js"></script>
</body>
</html>
angular.module('app',[]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="app">
Please input : 'parola' <input type="text" ng-model="pass">
<button ng-show="pass == 'parola'">Next step</button>
</body>
There are several errors here.
First, the password field is bound to MyCtrl.pass. But you're watching the value of $scope.pass
Second, $scope.$watch expects an angular expression to evaluate as argument, not a value to watch. So watching the string 'MyCtrl.pass' would be the correct thing to do.
Third, you shouldn't use a watch at all. You should just use ng-show="isPasswordValid(pass)"(see below), and return true or false from this function.
Fourth, instead of doing $scope.kPass = ($scope.pass == "parola"), you're inverting the value of $scope.kPass, but only if the value is correct. So if it goes from incorrect to correct, kPass will become true. Then if it becomes incorrect, kPass will stay true. And if it becomes correct again, it will become false.
So, to resume, all you need is
<div ng-controller="MyCtrl">
<input type="text" ng-model="pass">
<div class="button" ng-show="isPasswordValid(pass)">click me</div>
</div>
and
$scope.isPasswordValid = function(password) {
return pass === 'parola';
};