I've got the following code:
<!DOCTYPE html>
<html>
<body>
<div ng-app="">
<p>Name: <input type="text" ng-model="name"></p>
<p ng-bind="name">{{$http.get('https://api.themoviedb.org/3/movie/now_playing?api_key=b4e5192d902f5add71f4a431c004d734').success(successCallback);}}</p>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
<script>
$http.get('https://api.themoviedb.org/3/movie/now_playing?api_key=b4e5192d902f5add71f4a431c004d734').success(successCallback: 'JSON_CALLBACK');
</script>
</body>
</html>
But it is not returning anything, how do I make it so I can at least just display everything in that API? I would like to assign it to an variable and be able to explode it for manipulation.
You need to first define an app and a controller, and call $http inside it. In your HTML you can display the data that gets passed into the callback. Something like this:
<!DOCTYPE html>
<html>
<body>
<div ng-app="App" ng-controller="Ctrl">
<p>Name: <input type="text" ng-model="name"></p>
<p>{{ data }}</p>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
<script>
angular.module('App', []).
controller('Ctrl', function($scope, $http) {
$http.get('https://api.themoviedb.org/3/movie/now_playing?api_key=b4e5192d902f5add71f4a431c004d734').success(function(data) {
$scope.data = data;
});
});
</script>
</body>
</html>
You have a syntax error in your $http.get call. The options inside of .success need to be surrounded with curly braces, as they're an object.
Also, you're trying to use $http before it's been defined.
The http call should be made in a controller. Angular services are not accessible directly in the html or immediately in a script block. I'm sure if you checked the console window you would see at least a couple of errors in what you have put here.
Basically when the data is returned the controller can assign the returned data onto a variable on the scope.
I'm going to guess your new to angular in which case there are many great resources online to guide you though making these first basic steps. Checkout https://egghead.io/articles/new-to-angularjs-start-learning-here.
Related
I am making a simple program, where if a person types a word 'alpha', the form gets all its elements states ng-prestine/ng-touched/ng-valid/ng-invalid all to their initial states. I think I am doing it correctly but getting an error in console.
HTML
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<form name="form1">
<input type="text" ng-model="person">{{person}}
<button ng-click="click()">Click</button>
</form>
<script>
//Module Declaration
var app = angular.module('myApp',[]);
//Controller Declaration
app.controller('myCtrl',function($scope){
$scope.click = function(){
if ($scope.person = "alpha"){
form1.$rollbackViewValue();
}
}
});
</script>
</body>
</html>
Error
Reference
https://docs.angularjs.org/api/ng/type/form.FormController
Can someone help me out?
The form form1 isn't a defined variable in your controller. You have to use $scope.form1.$...
But be aware that $rollbackViewValue might not do what you expect. It would be easier to set the state you want your form to be in manually.
I'm doing an ionic (angular) app and I have the following simple code at the head of one of my templates:
<script>
$(document).ready(function(){
alert($('#amountID').attr('id'));
});
</script>
</head>
...
<label class="aquitext item item-input" id="amountID">
I used to have the tradicional javascript onclick("blablabla") and it worked to a point but I decided to shift it to jquery and now I'm so stuck I had to remove and simplify it to this point. I've tried multiple permutations of this, including using angular's .element but I keep getting "undefined" on the alert. What am I doing wrong?
(No I don't get any errors on the console)
Edit: It seems it might be related to the fact that I have afterwards an ionic slide-box, thought I have little clue as to how to circumvent it. For now, I removed the slider boxes. Seems to have "fixed" it.
the full structure is, after the script (I trimmed some of the stuff out):
</script>
</head>
<body>
<ion-view>
<ion-content>
<ion-slide-box>
<ion-slide>
</ion-slide>
<ion-slide>
<div class="subtitle">blabla</div>
<form name="newaquisition">
<label class="aquitext item item-input" id="amountID">
<input ng-model='newaquisubmission.amount' type='number' placeholder='aquisition value' required>
</label>
</form>
</ion-slide>
</ion-slide-box>
</ion-view>
</ion-content>
</body>
</html>
Is the label in your HTML or is this part of some template and is added to the DOM by angular?
If you run the JS in the console, does it work? Then it's most likely a timing-problem. $(document).ready seems to be to early.
try $scope.init in your angular-controller
There doesn't seem to be anything wrong with your code; It should work.
Despite that, try creating a variable within the function and then using that variable as the value of alert. For instance,
var x = $('#amountID').attr('id');
alert(x);
If that doesn't work. You probably have an error elsewhere in your code.
Have you referenced a jQuery library (<script src="jquery-2.1.4.min.js"></script>)?
Seem that you don't push the jquery source, this code is correct:
<html>
<head>
<title>Test</title>
<script type="text/javascript" src="jquery-1.10.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
alert($('#amountID').attr('id'));
});
</script>
</head>
<body>
<label class="aquitext item item-input" id="amountID">
</body>
</html>
I have a simple page that shows the hash of a string as someone types it into the page. I found that the page had a JavaScript error
Error: [$rootScope:infdig] http://errors.angularjs.org/1.2.26/$rootScope/infdig?p0=10&p1=%5B%5B%22sha1…75651%2C1080464653%2C-772792499%5D%2C%5C%22sigBytes%5C%22%3A20%7D%22%5D%5D
A very simplified version of the page is
<html lang="en">
<head>
<script src="http://crypto-js.googlecode.com/svn/tags/3.1.2/build/rollups/sha1.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<script>
function MyCtrl($scope) {
$scope.sha1 = function(pwd) {
return CryptoJS.SHA1(pwd);
};
}
</script>
</head>
<body>
<div class="app" ng-app ng-controller="MyCtrl">
<span ng-bind="sha1('bar')"></span>
</div>
</body>
</html>
which is available as Plunker http://plnkr.co/edit/vmBtH8B2EKsdcfZVGlMH.
What I am trying to do in the original page is recalculate the hash as someone types into the form field, and the input field definition looked like this
<input id="password" ng-model="password" type="text" placeholder="Password">
and the ng-bind is really ng-bind="sha1(password)", but the simple static case in the Plunker exhibits the same behavior.
I gather that the infdig error has to do with too many $digest cycles, but I don't see how that would happen here. It looks like the hash computation triggers the error, because returning a static string from the sha1 function causes no error.
Providing ng-bind="sha1('bar')" makes the digest cycle unstable, everytime sha1 function returns a different object (reference is different) and your digest cycle has to run again to stabilize it and every digest cycle again evaluates the ng-bind function expression and it goes on till it reaches the max limit set (10). You can also easily replicate this issue by just doing return [] in your scope method. This is just a side effect of not so good practice of binding a function expression to ng-bind as it runs every digest cycle, if at all used it should be carefully evaluated.
One simple solution is to bind ng-change/ng-blur event on your password or any other trigger and just bind ng-bind to a property instead of a function expression.
angular.module('app',[])
.constant('Crypto', window.CryptoJS);
function MyCtrl($scope, Crypto) {
$scope.encrypt = function() {
$scope.encrypted = Crypto.SHA1($scope.password);
};
}
<html lang="en" ng-app="app">
<head>
<script src="http://crypto-js.googlecode.com/svn/tags/3.1.2/build/rollups/sha1.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
</head>
<body>
<div class="app" ng-app ng-controller="MyCtrl">
<input id="password" ng-model="password" type="password" placeholder="Password" ng-change="encrypt()">
<span ng-bind="encrypted"></span>
</div>
</body>
</html>
For better usage of DI i have placed crpto in a constant and inject it where needed.
In case of printing the response from other server,which might have too much html code,and want to print in only single div how can i do it?
In jquery we can use
$("#xyz").html("<h1>Hello World</h1><b>thank you</b><strong>good bye</strong>");
is there any solution to print it in anguler
I am trying to print the Hello World in h1 tag but it shows only text without any effect
This is my code
<!DOCTYPE html>
<html>
<body>
<div ng-app="" ng-controller="personController">
{{kj}}
</div>
<script>
function personController($scope) {
$scope.kj=" <h1>Hello World</h1><b>thank you</b><strong>good bye</strong>"
}
</script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
</body>
</html>
This is my output
<h1>Hello World</h1><b>thank you</b><strong>good bye</strong>
You need to use templates to build markup structure:
<div ng-app="" ng-controller="personController">
<h1>{{kj}}</h1>
</div>
And scope variables to put the content into templates:
$scope.kj = "Hello World";
If you want to build custom tags, use directives.
Note, you can also do something like this using ng-bind-html-unsafe (or just ng-bind-html, depending on the angular version), but it's definitely not recommended in this case:
<div ng-app="" ng-controller="personController" ng-bind-html-unsafe="kj"></div>
while having:
$scope.kj="<h1>Hello World</h1><b>thank you</b><strong>good bye</strong>";
This directly answers your question, but it's not really the ideal way to do things in angular.
Your updated version:
<div ng-app="" ng-controller="personController">
<h1>{{kj}}</h1><b>{{ty}}</b><strong>{{gb}}</strong>
</div>
Controller
$scope.kj = "Hello World";
$scope.ty = "thank you";
$scope.gb = "good bye";
I'm trying to update scope value on parent window from a child popup.But whenever I try to access the parent window scope,it returns undefined. As it involves two window, I couldn't create a fiddle for this. Code sample is pasted below.
Main page (main.html)
<!doctype html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<script>
var myApp = angular.module('myApp',[]);
function MyCtrl($scope) {
$scope.name = 'Superhero';
}
</script>
</head>
<body ng-app="myApp">
<div id="ctrl" ng-controller="MyCtrl">
Hello, {{name}}!
<input type="button" value="Open popup!!" onclick="window.open('child.html');"/>
</div>
</body>
</html>
Child window (child.html)
<!doctype html>
<html >
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<script>
function change(){
var e = window.opener.document.getElementById('ctrl');
var ae = angular.element(e);
var s = ae.scope();
s.name="New Superhero";
s.$apply();
}
</script>
</head>
<body>
<input type="button" value="Update parent scope!" onclick="change();"/>
</body>
</html>
Here whenever I try to access scope from the angular element , as shown above in change method, it returns undefined [ae.scope()].But when the same code moved to a function in parent window [only difference in how 'ctrl' element is being accessed], it worked fine and I was able to update the scope variable. Can anyone point out what actually is going wrong here? Thanks
Use the angular reference from the opener:
function change() {
var s = window.opener.angular.element('#ctrl').scope();
s.name="New Superhero";
s.$apply();
}
I had a similar need and had the same problem accessing the scope using angular.element. I was was able to solve it as follows though:
In your main/parent controller do something like this:
$scope.food = 'Mac & Cheese';
window.$windowScope = $scope;
$window.open('views/anotherWindow.html', '_blank','menubar=yes,toolbar=yes,location=yes,resizable=yes,scrollbars=yes,status=yes,personalbar=yes');
Then in the child window controller you can access $windowScope like this:
$scope.parentWindow = window.opener.$windowScope;
console.log($scope.parentWindow.food);
An alternative to putting data directly into the scope would be to use $window scope to broadcast and/or emit events, which is the preferred way of cross-controller communication in angular.