I'm trying to create a very simple ng-href page in AngularJS but it is not working and I cannot understand why.
<!DOCTYPE html>
<html ng-app="href">
<head>
<title>ngHref</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
</head>
<body ng-controller="ngh">
<div>
<p>Go to<a ng-href="{{base}}">{{base}}</a></p>
</div>
<script>
var a = angular.module('href', [])
a.controller('ngh', function() {
this.base = 'www.google.com';
});
</script>
</body>
</html>
You should use $scope to bind something to DOM. If you want use something with this. you should do something like:
HTML
<body ng-controller="ngh as vm">
JS
var a = angular.module('href', [])
a.controller('ngh', function() {
var vm = this;
vm.base = 'www.google.com'; // or this.base
});
<!DOCTYPE html>
<html ng-app="href">
<head>
<title>ngHref</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
</head>
<body ng-controller="ngh">
<div>
<p>Go to<a ng-href="{{base}}">{{base}}</a></p>
</div>
<script>
var a = angular.module('href', [])
a.controller('ngh', function($scope) {
$scope.base = 'www.google.com';
});
</script>
</body>
</html>
Related
I am new to handlehars, and feel the basic tutorials are not very newbie friendly. I have to put pieces together and the following code seems not working. The html is generated correctly which means it does work but nothing shows up.
<!DOCTYPE html>
<html lang="en">
<head>
<title>test handlebars</title>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/2.0.0/handlebars.js"></script>
<script id="entry-template" type="text/x-handlebars-template">
<div class="entry">
<h1>{{title}}</h1>
<div class="body">
{{body}}
</div>
</div>
</script>
</head>
<body>
<div class="container"></div>
<script>
$(document).ready(function(){
var source = $("#entry-template").html();
var template = Handlebars.compile(source);
var context = {title: "My New Post", body: "This is my first post!"};
var html = template(context);
console.log(html);
$(".container").innerHTML = html;
});
</script>
</body>
$(".container").innerHTML = html;
You're mixing vanilla JS and jQuery. Either set the HTML the vanilla way,
document.querySelector(".container").innerHTML = html;
or the jQuery way:
$(".container").html(html);
I tried to create two buttons, so that when I click on each- I will get a pop up small window, with a content that it will get while onloading.
This is the code:
index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script type="text/javascript" src="script.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body ng-app="myApp">
<p ng-controller="ctrl">
<span ng-repeat="x in items">
<button ng-click="parentFunc(x.fieldOne,x.fieldTwo)">{{x.fieldOne}}</button>
<br><br>
</span>
</p>
<script>items();</script>
</body>
</html>
script.js:
var title, content;
function items(){
angular.module('myApp', []).controller('ctrl', function($scope) {
$scope.items = [
{fieldOne:"field1", fieldTwo:"field1 content"},
{fieldOne:"field2", fieldTwo:"field2 content"}
];
$scope.parentFunc=function(titleTmp,contentTmp){
title=titleTmp;
content=contentTmp;
var OpenWindow = window.open('popUp.html','_blank','width=500, height=400');
return false;
}
});
}
function codeAddress() {
document.getElementById("title").innerHTML=title;
document.getElementById("content").innerHTML=content;
}
popUp.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script type="text/javascript" src="script.js"></script>
</head>
<body onload="codeAddress();">
<h1 id="title"></h1>
<div id="content"></div>
</body>
</html>
The new pop up window open as expected, but the h1 and div in it get undefined. I tried to debug it, and I saw that after the first two lines of parentFunc are executed, the global variables title and content get what I expect and they are not undefined. However, when the third line is executed and the new window get opened- the global variables are undefined.
Why the two global variables are undefined in the pop up window?
And how can I solve this?
Your method won't work : you are trying to reload the script.jsand then, the vars are reinitialized.
Add your vars in the URL :
var OpenWindow = window.open('popUp.html?title='+titleTmp+'&content='+contentTmp,'_blank','width=500, height=400');
Then, in your second page, read those parameters :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script type="text/javascript">
function codeAddress(){
var title = GET_TITLE_FROM_PARAMETER;
var content = GET_CONTENT_FROM_PARAMETER;
document.getElementById("title").innerHTML=title;
document.getElementById("content").innerHTML=content;
}
</script>
</head>
<body onload="codeAddress();">
<h1 id="title"></h1>
<div id="content"></div>
</body>
</html>
And of course, remove codeAddress from the first page as it's useless.
FYI, to get the parameters values, please check this answer.
I wrote these few lines of code and would like the text to change once the button is pressed but its not working. Could you please find out the problem?
var omari = "Omari Lamar";
function omari (){
el = document.getElementById('slice');
el.textContent = omari + "Is a computer Programmer!";
}
<html>
<head>
<title></title>
</head>
<body>
<h1>Title Example</h1>
<button onclick="omari();">Click me</button>
<div id="slice">
sample text
</div>
<script src="app.js"></script>
</body>
</html>
Change the code to:
var omariName ="Omari Lamar";
function omari (){
el = document.getElementById('slice');
el.textContent = omariName + "Is a computer Programmer!";
}
Here you go, Your function name and variable name were the same
var omary ="Omari Lamar";
var omari = function(){
var el = document.getElementById('slice');
el.innerHTML = omary + "Is a computer Programmer!";
};
<html>
<head>
<title>
</title>
<script src="app.js"></script>
</head>
<body>
<h1>Title Example</h1>
<button onclick="omari();">Click me</button>
<div id="slice">
sample text
</div>
<script src="app.js"></script>
</body>
</html>
this is the problem:
you have a variable named omari and a function name omari. so, when you try calling the function omari, javascript actually looks at the variable definition, and not the function. just give them different name.
try the code below.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>test</title>
</head>
<body>
<script>
var _omari ="Omari Lamar";
function omari(){
el = document.getElementById('slice');
el.innerHTML = _omari + " Is a computer Programmer!";
}
</script>
<h1>Title Example</h1>
<button onclick="omari();">Click me</button>
<div id="slice">
sample text
</div>
</body>
</html>
Probably it is "old school" using alerts when learn or debug JS, but sometimes I decline to such approach. I am learning angularjs, and it is very difficult to understand scheduling, I mean step by step how angularjs is executing different directives.
As an instance, here small app in angularjs, and I can not understand why on one alert there are 5 messages???
http://plnkr.co/edit/8j7D0J0a6By447whhpa3?p=preview
<!doctype html>
<html>
<head>
<title></title>
<style>
.red
{
color:red;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular-route.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="demoApp">
<div ng-controller="testCntr">
<span ng-class="{red: setClass()}">Test color</span>
<div>{{setClass()}}</div>
</div>
</body>
</html>
JS
demoApp = angular.module('demoApp',[]);
demoApp.controller('testCntr', function ($scope) {
$scope.setClass = function () {
alert('test');
return true;
}
});
The problem is that you're calling that function over and over again. Change it to be event driven and you'll be good:
http://plnkr.co/edit/zh0kIs?p=preview
html
<body ng-app="demoApp">
<div ng-controller="testCntr">
<span ng-class="{'red': changeClassModel}">Test color</span>
<br><br>
<button ng-click="setClass()">Hooray Alerts!</button>
</div>
</body>
js:
demoApp = angular.module('demoApp',[]);
demoApp.controller('testCntr', function ($scope) {
$scope.changeClassModel = false;
$scope.setClass = function () {
alert('test');
$scope.changeClassModel = true;
return true;
}
});
I'm new in Angular, so maybe I missing something. Does anybody know, what's wrong with expression state in such case:
The value 'isDisable.state' change in 'p' tag, but not in 'ng-disabled'. The button doesn't change it state to disabled.
Here is the plunk:http://plnkr.co/edit/zc8k9oCUxlMRCkZKjQa5?p=preview
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example - example-example53-production</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0-beta.1/angular.min.js"></script>
<script type="text/javascript">
var myapp = angular.module('switcher',[]);
myapp.controller('switchState', function ($scope) {
$scope.isDisable = {'state':false};
$scope.toggle = function () {
$scope.isDisable.state = !$scope.isDisable.state;
}
});
</script>
</head>
<body ng-app="switcher">
<div ng-controller="switchState">
<button ng-click="toggle()">toggle</button>
<button ng-disabled="{{isDisable.state}}">Disabled</button>
<p>{{isDisable.state}}</p>
</div>
</body>
</html>
Remove the {{}}
ng-disabled="isDisable.state"