I am new to angularjs and have written a small program but facing the error "scope.detailsForm" as undefined. Could someone help me what is the issue with the below code.
b.js file:
var app = angular.module('my-app', []);
app.controller("my-cont", function($scope) {
$scope.detailsForm.clickme.$setValidity("error1",true);
});
b.html file:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script type="text/javascript" src="b.js"></script>
</head>
<body ng-app="my-app" ng-controller="my-cont">
<form method="get" name="detailsForm" ng-model="detailsForm">
<button name='clickme' ng-disabled="detailsForm.clickme.$error.error1">Click Me!</button>
</form>
</body>
</html>
Your problem is that you can not get it when the controller is not built, you need to wait for the html to be processed by Angular. Here's an example.
As you'll see in the console, the first log will echo undefined, and the second will echo the form.
var app = angular.module('MyApp', []);
app.controller("MyCont", ['$scope', function($scope) {
console.log($scope.detailsForm);
$scope.onClicked = function()
{
console.log($scope.detailsForm);
}
}]);
Related
Hey guys i got a problem with implementing ngDialog in my current project.
For testing i have created following working code:
test.php
<html ng-app="myapp">
<head>
<meta charset="utf-8">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/ng-dialog/0.1.6/ng-dialog.min.css" />
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/ng-dialog/0.1.6/ng-dialog-theme-plain.min.css" />
<script data-require="angular.js#1.2.x" src="https://code.angularjs.org/1.2.21/angular.js" data-semver="1.2.21"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ng-dialog/0.1.6/ng-dialog.min.js"></script>
<script src="neuejs.js"></script>
</head>
<body ng-controller="MainCtrl">
<button ng-click="openDialog($event)">Open Me!</button>
<script type="text/ng-template" id="templateId">
<div id="target" ng-click="test()" ng-controller="tt">
Bilder
</div>
</script>
</body>
</html>
and in a seperate neuejs.js:
var app = angular.module('myapp', ['ngDialog']);
app.controller('MainCtrl', function($scope, ngDialog) {
$scope.openDialog = function($event) {
var dialog = ngDialog.open({
template: 'templateId',
scope: $scope,
controller: 'FileController',
$event: $event,
className: 'ngdialog-theme-plain'
});
};
});
This works just fine. Exactly what i want.
My existing project has an app.js file with
var iMPULS = angular.module('iMPULS', []);
and the project works fine as well, but if i want to use ngDialog and change the module to:
var iMPULS = angular.module('iMPULS', ['ngDialog']);
the whole layout is kind of messed up, no link in my iMPULS.conf work anymore plus i got "Error: No module: ngDialog" concerning to angular.min.js in Firefox-Browserconsole.
How could this be? I just addes the 'ngDialog' to the module in app.js just like in the testfiles above.
I am trying to make a simple service call using SOAP services in AngularJS based on this page http://mcgivery.com/soap-web-services-angular-ionic/
But I am getting this error: Error: [$injector:unpr] http://errors.angularjs.org/1.4.3/$injector/unpr?p0=%24soapProvider%20%3C-%20%24soap%20%3C-%20CallService
this is my code:
index.html
<!doctype html>
<html>
<head lang="en">
<meta charset="UTF-8">
<script src="angular.min.js"></script>
<script src="soapclient.js"></script>
<script src="angular.soap.js"></script>
</head>
<body>
<form method="post" action="">
<div ng-app="myApp" ng-controller="MainCtrl">
<div>
<input type="button" value="Call Web Service - Test" ng-click="CallService();" />
</div>
</div>
</form>
<script src="app.js"></script>
</body>
</html>
app.js
var app = angular.module('myApp', [])
app.factory("CallService", ['$soap',function($soap){
var base_url = "http://10.0.0.70:8080/WS_usrService/WS_usr?wsdl";
return {
getAll: function(){
return $soap.post(base_url, "getAll");
}
}
}])
app.controller('MainCtrl', function($scope, CallService) {
CallService.getAll().then(function(response){
$scope.response = response;
}, function(){
console.log("Something went wrong!");
});
})
Thank you
The error message indicates that Angular cannot find the service $soap, which is defined on the module angularSoap.
According to the official guide, add the module dependency as:
var app = angular.module('myApp', ['angularSoap'])
All the services and controllers are boot strapped in "myApp" in your case.
You have not defined the $soap , while bootstraping the application.
It must be like this var app = angular.module('myApp', ['angularSoap'])
I'm quite new with Node/Angular/.. and tried this simple script. But it doesn't work, whats wrong with it?
I always get Error: [ng:areq] http://errors.angularjs.org/1.3.0/ng/areq?p0=rCtlr&p1=not%20a%20function%2C%20got%20undefined
<!DOCTYPE html>
<html ng-app>
<head lang="en">
<meta charset="UTF-8">
<title>test</title>
<script src="lib/angular/1.3.0/angular.min.js"></script>
<script src="lib/socket.io/1.2.0/socket.io.js"></script>
</head>
<body ng-controller="rCtlr">
<h1>{{xTime}}</h1>
<script>
function rCtlr($scope){
var socket = io.connect();
socket.on('updateTime', function (data) {
$scope.xTime = data.updateTime;
console.log(data);
});
}
</script>
</body>
</html>
Without Angular it works fine, I guess there is an issue with the function scope?
Thanks for help!
To make it work properly you should:
1) Add name to your ng-app:
<html ng-app="myapp"> //myapp is an example name
2) Then you can define angular module and controller like this:
angular.module("myapp",[]) // define module with name from ng-app
.controller('rCtlr',['$scope', function($scope){ //define controller for your module
var socket = io.connect();
socket.on('updateTime', function (data) {
$scope.xTime = data.updateTime;
console.log(data);
});
}]);
alternatively (it does the same):
var app = angular.module("myapp",[]);
app.controller('rCtlr',['$scope', function($scope){
//controller body
}]);
PS. It doesn't matter, but name of you controller should be "rCtrl" rather than "rCtlr"
Here is a refference to angular docs: https://docs.angularjs.org/guide/controller
Update, thanks to MarkS: But .. see comment to Mark's answer
<!DOCTYPE html>
<html >
<head lang="en">
<meta charset="UTF-8">
<title>AngularSocket</title>
<script src="lib/angular/1.3.0/angular.min.js" type="text/javascript"></script>
<script src="lib/socket.io/1.2.0/socket.io.js" type="text/javascript"></script>
<script src="app.js" type="text/javascript"></script>
</head>
<body data-ng-app="angApp">
<div data-ng-controller="timeCtrl">
<h1>{{xTime}}</h1>
</div>
</body>
</html>
app.js:
angular
.module('angApp', [])
.controller('timeCtrl', ['$scope', function($scope) {
var socket = io.connect();
socket.on('updateTime', function (data) {
$scope.xTime = data.updateTime;
console.log(data);
});
}]);
Trying to follow a tutorial, I can't get the "Hello, world" example working. Instead it displays: "{{greeting.text}}, world". Using Chrome and AngularJS 1.3.1.
index.html:
<!DOCTYPE html>
<html ng-app>
<head>
<script src="angular.js"></script>
<script src="app.js"></script>
<!--<link rel="stylesheet" type="text/css" href="bootstrap.min.css" />-->
</head>
<body>
<div ng-controller='HelloController'>
<p>{{greeting.text}}, world </p>
</div>
</body>
</html>
app.js
function HelloController($scope) {
$scope.greeting = { text: 'Hello' };
}
My folder structure
root/
angular.js
app.js
index.html
Thank you
I hope this helps.
index.html
<!DOCTYPE html>
<html ng-app="appname">
<head>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular.min.js"></script>
<link href="style.css" rel="stylesheet"/>
<script src="script.js"></script>
</head>
<body>
<div ng-controller="appCtrl">
<p>{{greeting.text}}, world </p>
</div>
</body>
</html>
script.js
var appname = angular.module('appname', []);
appname.controller('appCtrl', ['$scope',
function($scope) {
$scope.greeting = { text: 'Hello' };
}]);
http://plnkr.co/edit/XmliRcmsZvuQimHoyjN5?p=preview
Answering the question of what is wrong and if they changed something.
AngularJs Version 1.2 or older: The controller could be a function not defined into a module. Like in the question.
Controller
function HelloController($scope) {
$scope.greeting = { text: 'Hello' };
}
Angular Version 1.3 or newer: The controller must be defined into a module. Like in the answer.
Controller
var appname = angular.module('appname', []);
appname.controller('appCtrl', ['$scope',
function($scope) {
$scope.greeting = { text: 'Hello' };
}]);
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCntrl">
Enter text:
<br />
<input type="text" ng-model="hellomodel" />
<br />
<br />
<h1>
{{hellomodel}}</h1>
<script language="javascript">
var myapp = angular.module("myApp", []);
myapp.controller("myCntrl", function ($scope) {
$scope.hellomodel = "Hello World!";
});
</script>
</div>
</body>
</html>
http://dotnetlearners.com/blogs/view/222/AngularJS-Hello-World.aspx
The accepted answer is good but I thought I'd chip in with some resources I've found helpful if you're looking for a better understanding of how things work in Angular
Egghead.io - www.youtube.com/playlist?list=PLP6DbQBkn9ymGQh2qpk9ImLHdSH5T7yw7
Shaping up with Angular www.codeschool.com/courses/shaping-up-with-angular-js
Both are completely free courses and because the egghead.io playlist is split into videos for separate concepts it's also really good reference material.
The angular.js developer guide is also really helpful!
What is wrong?
<!doctype html>
<html lang="en" ng-app='SOO'>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div ng-controller='someController'>
<p>{{someData}}</p>
</div>
<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.7/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.7/angular-route.min.js"></script>
<script>
$(function(){
var app = angular.module('SOO', ['ngRoute']);
app.controller('someController', function($scope){
$scope.someData = 'Ok, all good!';
})
})
</script>
</body>
</html>
And error message in the console:
Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.3.0-beta.7/$injector/modulerr?p0=app&p1=Error…s.org%2F1.3.0-beta.7%2F%24injector%2Fnomod%3Fp0%3Dapp%0A%20%20%20%20at%20E...<omitted>...2) angular.js:36
But examples from the official site are working normal. I can't see the serious difference.
Change:
var app = app.module('SOO', ['ngRoute']);
To:
var app = angular.module('SOO', ['ngRoute']);
And remove the jQuery document ready handler that is wrapping your code:
<script>
var app = angular.module('SOO', ['ngRoute']);
app.controller('someController', function($scope){
$scope.someData = 'Ok, all good!';
});
</script>
From the documentation:
Angular initializes automatically upon DOMContentLoaded event or when
the angular.js script is evaluated if at that time document.readyState
is set to 'complete'. At this point Angular looks for the ng-app
directive which designates your application root.
Just remove Jquery statement $(function(){}), then everything works fine.
<!doctype html>
<html lang="en" ng-app='SOO'>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div ng-controller='someController'>
<p>{{someData}}</p>
</div>
<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.7/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.7/angular-route.min.js"></script>
<script>
var app = angular.module('SOO', ['ngRoute']);
app.controller('someController', function($scope){
$scope.someData = 'Ok, all good!';
});
</script>
</body>
</html>