I've tried to read the documentation on ng-include with no luck thus far. All I want to do is have the ng-include evaluate the path of where the template/partial is and load the contents:
<div data-ng-include src="'{{pageData.src}}'"></div>
I can see pageData.src is returning "tpl/page.html" in the console. I've tried the following variations:
<div data-ng-include src="{{pageData.src}}"></div>
<div data-ng-include src='{{pageData.src}}'></div>
<div data-ng-include src={{pageData.src}}></div>
None of them seem to evaluate the expression. I receive the following error:
Error: [$parse:syntax] http://errors.angularjs.org/1.2.9/$parse/syntax?p0=pageData.src&p1=is%20unexpected%2C%20expecting%20%5B%3A%5D&p2=3&p3=%7B%7BpageData.src%7D%7D&p4=pageData.src%7D%7D
Feedback is much appreciated!
In ng-include src takes a javascript expression so in your case the following should work:
<div data-ng-include src="pageData.src"></div>
when you see it like this
<div data-ng-include src="'templates/myTemplate.html'"></div>
the extra single quote inside the double quotes is a javascript expression in this example a string literal.
when you see {{}} this is for directives that do not take javascript expressions but just a string. For example ng-href takes a string. That string can be the result of a js expression which should be enclosed on {{}} e.g.
<a ng-href="{{pageData.src}}/myImage.jpg">Go</a>
Finally to mention something that confused me which was when there is an expression with single curlies {}. e.g.
<a ng-class="{'active': item.active, 'locked': item.disabled}">Go</a>
in this case this is a js map expression and the ng-class takes the name that has a value the evaluates to true. So if in the above item.active evaluates to true then 'active' will be added as a class.
Try this:-
<div data-ng-include="pageData.src"></div>
If you can post a jsFiddle, it would be easy for me to see the exact problem.
Related
I am trying to use ng-repeat to spit out part of a url (my.url) within ng-include. Unfortunately I cant seem to get it to work. It works when I dont place it within an ng-include, so I know that part isnt the issue. THe issue seems to be when I place {{my.url}} inside ng-repeat and attached to the first (static) part of the url.
What i am aiming for is the ng-include to use "filepath/filepath/mypage.html
my.url is the mypage.html bit.
Anybody able to advise?
<uib-tab ng-repeat="stuff in myList" heading="{{my.text}}" class="sg-tabbed-titles">
<div class="tab">
<ul class="tabbed-list">
<li class="tab-content">
<div ng-include="'\filepath/filepath/{{my.url}}\'"></div>
</li>
It should be
<div ng-include="'filepath/filepath/' + my.url"></div>
ngInclude takes expression. It means that you need to use normal string concatenation just like you would do in regular javascript code.
Actually I'm confused between when to use {{ }} when using angular directives and when to not to use {{ }}
For example:
<div data-ng-init="isHidden=false">
<div data-ng-show="isHidden">
...
</div>
</div>
and
<div data-ng-init="isHidden=false">
<div data-ng-show="{{isHidden}}">
...
</div>
</div>
I'm confused between these syntax ? What are the differences between those? And when to use what? Thanks in advance :)
There is no difference except the "look" u need to use the {{value}} syntax in case you want to write data anywhere in your html body
<div>{{value}}</div>
It's all explained here: Difference between double and single curly brace in angular JS?
For quick answer:
{{}} are Angular expressions and come quite handy when you wish to
write stuff to HTML
Don't use these at a place that is already an expression!
For instance, the directive ngClick treats anything written in between
the quotes as an expression
<div data-ng-init="isHidden=false">
<div data-ng-show="isHidden">
...
</div>
</div>
In This Situation data-ng-show = false , Takes From data-ng-init As Statically,if You Have Given true Then It Returns True .
But Here
<div data-ng-init="isHidden=false">
<div data-ng-show="{{isHidden}}">
...
</div>
{{}} Called As Expressions In Angular One Of The Most Important Concept
It Directly Evaluate If isHidden = true Or False Based On Any Condition Written In Your App.js File .
Example:
<div data-ng-init="isHidden=YourVariable">
<div data-ng-show="{{isHidden}}">
...
</div>
if(YourVariable == true){
Do Somthing
}
else{
Do Something
}
If you are asking when to use {{}} while assigning value to a attribute and when not.
It depends on the binding types of directive. '#' or '='
So here, you have to use:
data-ng-show="{{isHidden}}" if the binding type of directive scope data-ng-show is '#', that mean the data-ng-show will be expecting a string value. So in this case if you keep data-ng-show="isHidden" it will take data-ng-show's value as 'isHidden', but data-ng-show="{{isHidden}}" will take the value of the $scope.isHidden and assign to data-ng-show.
Now if the binding type of directive scope data-ng-show is '=', that means the data-ng-show will be expecting a value from a scope. So data-ng-show="isHidden" itself will take the value of he $scope.isHidden and assign to data-ng-show.
Note: all the default HTML attributes expect a string so you have to use {{}} for default HTML attributes.
There is no as such major difference unless one uses them in the DOM for the value.
When one uses the following:
<div data-ng-show="isHidden">
then, expression is evaluated and on the basis of it respective value, the ng-show either hides or displays the div. But the value of the isHidden cannot be seen, when one inspects the HTML using the browser developer tool.
When one uses the following:
<div data-ng-show="{{isHidden}}">
In this case, the value of the isHidden can be seen from the developer tools, and the rest of the expression does evaluates the same as that of (1).
The problem is the attribute ng-click="deleteItem('{|{ reservation._links.self.href }|}')
<body ng-app="ReservationList">
<div class="content" ng-controller="ReservationListController">
<div class="panel" ng-repeat="reservation in reservations">
<div class="itemId{|{reservation.id}|}">
<button class="close" ng-click="deleteItem('{|{ reservation._links.self.href }|}')">X</button>
<div class="panel-heading clearfix">
<h3 class="panel-title">{|{ reservation.firstName }|}</h3>
<h3 class="panel-title">{|{ reservation.lastName }|}</h3>
</div>
</div>
</div>
</div>
</body>
Interestingly, when i inspect the html source, the ng-click will look like this:
ng-click="deleteItem('http://localhost:8080/reservation/1')"
However when launching the ng-click function it will just give the non-compiled attribute name as the parameter:
DELETE http://localhost:8080/%7B%7C%7B%20reservation._links.self.href%20%7D%7C%7D 405 (Method Not Allowed)
The DELETE request should have http://localhost:8080/reservation/1 as the endpoint but somehow it doesnt parse the attribute when i send the DELETE request and will just annoy me with this unparsed {[{ reservation._links.self.href }]}.
Should I even use HAL links as the endpoints for CRUD operations or is it more wise to just give the id to my delete function.
Just to note DELETE requests on http://localhost:8080/reservation/1 do work when i hardcode it in.
Do not pass Angular Expression to function. Pass the variables directly without {{}}.
In your case
ng-click="deleteItem(reservation._links.self.href)"
You could try simply not using the expression syntax and pass it directly:
ng-click="deleteItem(reservation._links.self.href)"
Perhaps I'm wrong, but I'm not actually familiar with this syntax:
ng-click="{|{expression}|}"
Shouldn't be like this instead (note the lack of the pipe |)?
ng-click="{{expression}}"
Also, I think you would want to include the deleteItem call within the expression scope, no?
So, you'd end up with this:
ng-click="{{deleteItem(reservation._links.self.href)}}"
This binds the clicking of that HTML element to the invocation of the model/controller in scope that has the deleteItem function, passing into it the desired href from the expression.
Read up on expressions here: https://docs.angularjs.org/guide/expression
Is it possible to evaluate an angular expression in a ng-if?
For instance:
<div ng-if="itemData.contentTypeId = {{$root.res('resources', article_type_id')}}">
<!-- some content -->
<div>
also tried surrounding the expression in single quotes:
<div ng-if="itemData.contentTypeId = '{{$root.res('resources', article_type_id')}}'">
<!-- some content -->
<div>
and neither worked as expected.
Is this an issue with syntax or is this not possible? If this is a syntax issue, how should the statement above be written?
The ng-if text IS an angular expression. Whatever string you write in there gets parsed by angular using $scope.$eval(). Any variables (including functions) that are used in the expression must be visible from the current $scope.
That means for this code to work, $scope.$root must be defined. Make sure it is, or you can't run the res() function, or else find another way.
ng-if evaluates the expression to a truthy or falsey value, so your = must be a comparison operator == or ===.
<div ng-if="itemData.contentTypeId === $root.res('resources', article_type_id')">
I may have worded this title incorrectly but I am hoping to still get some help. I am trying to use an expression that I get from an ng-repeat to include an new page using ng-include but it is not rendering. I can write in the page I want, but I want to use the expression to include multiple pages dynamically
<div ng-app="" id="container" ng-controller="pagesController">
<span ng-repeat="x in pages">
{{x.Page | uppercase}}
<b ng-if="!$last" href="#"> - </b>
<div ng-include="'{{x.HTML}}'" name="{{x.Page}}"></div>
</span>
But if I manually enter the pages like so:
<div ng-include="'generic.htm'" name="generic"></div>
It works as expected.
I am getting used to Angular.js obviously and I am not sure if this is possible or if I can do what I want really. Any help would be appreciated.
ng-include is an angular directive, and assuming x.HTML is a string, omit the {{}} and the single quotes:
ng-include="x.HTML"