In the following code:
<!doctype html>
<html lang="en" ng-app>
<head>
<meta charset="utf-8">
<title>My HTML File</title>
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
<script src="bower_components/angular/angular.js"></script>
</head>
<body>
<div id="div1" style="display:none;">This disappears</div>
<p>Nothing here {{2 + "3" + document.getElementById("div1").innerText + "." }}</p>
</body>
</html>
I expected to see an error or failing that I'd expect "23This disappears." What I do see is "23." (Notice the missing "This disappears")
It's obvious that the mustache is not doing a direct evaluation, but what is actually going on here?
The 2 is being converted into a string and then concatenated with the "3" string, because you can't concatenate an integer with a string.
AngularJS expressions are JavaScript-like code snippets that are evaluated by AngularJS in the context of the current model scope, rather than within the scope of the global context (window).
https://docs.angularjs.org/guide/expression
Related
This is the code.
(I know that I must type here so many text to post my question, but please ignore this part in the parenthesis. It is due only to the rules of the site.)
I can not find the reason, but on screen only appears "{{adat}}".
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> </title>
<script src="https://code.angularjs.org/1.8.2/angular.js">
</script>
<script type="text/javascript">
function todoc($scope) {
$scope.adat = "Szia!";
}
</script>
</head>
<body ng-app>
<div ng-controller="todoc">
<h1> {{adat}} </h1>
</div>
</body>
</html>
It turned out that this version of Angular works with a newer syntax.
For this syntax the appropriate version is 1.0.0
<head>
<title></title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js"></script>
</head>
<body>
{{2+2}}
Why the {{2+2}} expression does not get evaluated to 4 ?
Am i missing a dependency ?
Add the ng-app directive to your body:
<body ng-app>
JSFIDDLE.
I am new to ThymeLeaf and I was wondering if there was a way to loop around a <p> html tag as well as iterate through an array within that <p> tag. I want the elements within smokeTest to end up in different paragraphs.
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>Getting Started: Serving Web Content</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
</head>
<body>
<p th:text="${smokeTests[0].name}"/>
</body>
</html>
Thanks for your help
Did you try the following code? I didn't test it, cause it's often used :
<body>
<p th:each="smokeTest : ${smokeTests}"
th:text="${smokeTest.name}">A Smoke Test</p>
</body>
This pretty straight forward. You can do this:
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>Getting Started: Serving Web Content</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<p th:each="smokeTest : ${smokeTests}" th:text="${smokeTest.name}"><p/>
</body>
</html>
You can also use some other html tags other than paragraph tag. Like this:
<h2 th:each="smokeTest : ${smokeTests}" th:text="${smokeTest.name}"><h2/>
Here is an example of a minimal example for angularjs which works when saved as angular.html:
<!DOCTYPE html>
<html lang="en" xmlns:ng="http://angularjs.org" ng:app="">
<head>
<title>My HTML File</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js"></script>
</head>
<body>
<p>Nothing here {{'yet' + '!'}}</p>
</body>
</html>
However I strongly believe in XML and I like to create all my html documents XML compliant. I tried to adapt the example and save it as angular.xhtml:
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:ng="http://angularjs.org" ng:app="">
<head>
<title>My HTML File</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js" />
</head>
<body>
<p>Nothing here {{'yet' + '!'}}</p>
</body>
</html>
The big changes are the xhtml-Namespace and the file extension ".xhtml". There is no error or anything. It's just that the page is displayed as if angular was not present.
How do I get angularjs working with an XML compliant file?
One of the best ways to do this is to use the HTML/XHTML data- attributes. You can write valid HTML and XHTML without having to include any angular namespace. This would be as follows:
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" data-ng-app="">
<head>
<title>My HTML File</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js" />
</head>
<body>
<p>Nothing here {{'yet' + '!'}}</p>
</body>
</html>
This is also beneficial when it comes to all other Angular declarations, such as ng-repeat and ng-show, etc.
<div ng-repeat="item in items">{{item.name}}</div> // This won't validate.
<div data-ng-repeat="item in items">{{item.name}}</div> // This will validate.
Note that your solution with bootstrapping the Angular app is also valid - but it's not really a fix for the issue you're having. (It's simply a different way to load your Angular app, which happened to work for your situation since you didn't have any other ng- directives in your markup.)
See a similar question and answer here.
I found a solution using manual setup. The code then looks like this:
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>My HTML File</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js" />
<script type="text/javascript">
angular.module('myApp', []);
angular.element(document).ready(function() {
angular.bootstrap(document, ['myApp']);
});
</script>
</head>
<body>
<p>Nothing here {{'yet' + '!'}}</p>
</body>
</html>
While this seems a suitable workaround for now, I'd still love to know what the problem is...
I have this code http://plnkr.co/edit/kiH0Ge?p=preview
<!doctype html>
<html ng-app="plunker" >
<head>
<meta charset="utf-8">
<title>AngularJS Plunker</title>
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<choice-tree ng-model="myTree" children="true"></choice-tree>
<hr />
$scope.myTree = {{myTree | json}}
</body>
</html>
I've added parametr checkChildren
<choice-tree ng-model="myTree" checkChildren="true"></choice-tree>
Then in check directive I want to run function conditionally
if(scope.checkChildren === 'true')
checkChildren(choice);
But it doesn't work.
I know there is isolated scope, but how to build tree then.
Now everything works http://plnkr.co/edit/5lLGIQ?p=preview
I just changed children to withchildren and this (crucial)
$compile('<choice-tree ng-model="choice.children" children="{{children}}"></choice-tree>')(scope);
to
$compile('<choice-tree ng-model="choice.children" withchildren="'+scope.withchildren+'"></choice-tree>')(scope);
http://plnkr.co/edit/5lLGIQ?p=preview
If my understanding is correct, I think it is a simple typo.
With a little modification, it seems to be working: http://plnkr.co/edit/BJqsl3
You want to check bool value, e.g. scope.checkChildren === true not against 'true'
[edit] It seems I did not understand the spec correctly
If I remove the if statement which I pointed out above, and call
checkChildren(), it works.
Is this what you intend?
Plunk is updated accordingly.