I am trying to add a class to my element in Angular. Here's my code:
<button class="medium"
data-ng-disabled="!gridForm.$pristine || fetching.length != 0"
data-ng-click="getQuestions()">
Retrieve<span class="fa fa-spinner fa-fw mlr75" data-ng-class="{fa-spin: fetching.length > 0}"> </span>
</button>
However it's giving me a strange error:
Syntax Error
error in component $parse
Syntax Error: Token '-' is at column {2} of the expression [{3}] starting at [{4}].
Does anyone have any ideas as to what might be wrong? Note that it works when I use the class faspin without the hyphen !!
Surround class name with singe quotation.
data-ng-class="{'fa-spin': fetching.length > 0}"
Otherwise angular search your scope for fa-spin which is not a valid name for variables.
Related
Using PrimeNG advanced Organization Chart: https://www.primefaces.org/primeng/#/organizationchart
Stats:
Angular 7
Chrome Browser: current version
Error:
compiler.js:2430 Uncaught Error: Template parse errors:
Unexpected character "EOF" (Do you have an unescaped "{" in your template? Use "{{ '{' }}") to escape it.) ("
</ng-template>
</p-organizationChart>
</div>[ERROR ->]"): ng:///AppModule/OrdertreeComponent.html#16:6
Unexpected closing tag "ng-template". It may happen when the tag has already been closed by another tag. For more info see https://www.w3.org/TR/html5/syntax.html#closing-elements-that-have-implied-end-tags ("
<div>{{node.data.name}}</div>
</div>
[ERROR ->]</ng-template>
<ng-template let-node pTemplate="department">
{ { node.label } }
"): ng:///AppModule/OrdertreeComponent.html#11:4
Invalid ICU message. Missing '}'. ("
</ng-template>
Html:
<p>Organization with advanced customization.</p>
<p-organizationChart [value]="data1" selectionMode="single" [(selection)]="selectedNode" (onNodeSelect)="onNodeSelect($event)" styleClass="company">
<ng-template let-node pTemplate="person">
<div class="node-header ui-corner-top">{{node.label}}/div>
<div class="node-content">
<img src="assets/showcase/images/demo/organization/{node.data.avatar}" width="32">
<div>{{node.data.name}}</div>
</div>
</ng-template>
<ng-template let-node pTemplate="department">
{ { node.label } }
</ng-template>
</p-organizationChart>
Attempted fixes:
I tried to use different types of escape methods for the brackets and really nothing seemed to work. I couldn't find anything that changed with Angular 7.
Changing single curly braces to double curly braces solved this issue for me.
i have a list and within that list i have a new list that needs to be paginated. To make sure that each inner list know which list they belong to i use: pagination-id:
<div class="list-group bg-white m-none b-t">
<span dir-paginate="module in category.organization_has_modules | itemsPerPage:10 | filter:search"
pagination-id="category.id">
<a ui-sref="app.library_assign({module_id:module.module.id})"
class="list-group-item"
ng-if="module.is_active != 0">
<i class="fa fa-fw {{module.module.module_type.icon}}"></i>
{{module.module.name}}
<span class="pull-right">
<i class="fa fa-sign-in"></i>
</span>
<div class="clear"></div>
</a>
</span>
<dir-pagination-controls class="pull-right" pagination-id="category.id"></dir-pagination-controls>
When i run this i sadly get the following error message:
error: [$parse:syntax] Syntax Error: Token '__currentPage' is an unexpected token at column 4 of the expression [103__currentPage] starting at [__currentPage].
if i run it without the pagination-id it runs fine however it is unable to differ the different lists which means all the pages change when i change it in one of the lists.
Does anyone have any idea of what im doing wrong?
The problem was apprently a bug with the id being a number. The parser in dirPagination.js line 206 does not accept numbers and the regex created to replace any numbers is apprently not working. So instead of using a number i used a string.
I am completely new to ReactJS and I 'm working on existing app, there I found some error in the line
<span data-toggle="modal" data-target="'#'+{providers.TICKET_NUMBER}">
{providers.TICKET_NUMBER} </span>
The error displaying is "jquery-1.10.2.min.js:21 Uncaught Error: Syntax error, unrecognized expression: '#'+{providers.TICKET_NUMBER}
Kindly please help,if possible. Excuse mistakes,If any.
You need to put the expression in a pair of {}
data-target={"#" + providers.TICKET_NUMBER}>
I am using the following html code to create an ng-repeat:
<td ng-repeat="parentCategory in totalParentCategoriesCount | orderBy :'-Count'">
<h3>
Kategori
<span class="sortorder" ng-show="predicate === 'CategoryParent{{parentCategory.Count}}'" ng-class="{reverse:reverse}"></span>
</h3>
</td>
I wish to add the text CategoryParent with the number from parentCategory.Count to create a dynamic link.
When inspecting the link in the browser I get the corret outcome which is CategoryParent0, CategoryParent1, CategoryParent2 and so on. But when clicking the link I get the following error:
Error: [$parse:syntax] http://errors.angularjs.org/1.2.16/$parse/syntax?p0=%7B&p1=is%20an%20unexpe…Parent%7B%7BparentCategory.Count%7D%7D&p4=%7B%7BparentCategory.Count%7D%7D
at Error (native)
at http://localhost:51976/Scripts/angular.min.js:6:450
at $a.throwError (http://localhost:51976/Scripts/angular.min.js:165:141)
at $a.parse (http://localhost:51976/Scripts/angular.min.js:164:6)
at $get (http://localhost:51976/Scripts/angular.min.js:96:122)
at http://localhost:51976/Scripts/angular.min.js:129:290
at http://localhost:51976/Scripts/angular.min.js:10:248
at Array.forEach (native)
at q (http://localhost:51976/Scripts/angular.min.js:7:280)
at Uc (http://localhost:51976/Scripts/angular.min.js:10:219)
On the angular page its says the following:
Syntax Error: Token '{' is an unexpected token at column 15 of the expression [CategoryParent{{parentCategory.Count}}] starting at [{{parentCategory.Count}}].
I have been looking at this answer AngularJS expression throwing a Syntax error in ng-click and therefore tried many different compinations in the order() method but I cant figure out how to make the link dynamic without using brackets.
Right now the parentCategory.Count is an int but I have also tried to parse it to a string but without any success.
ng-click already takes an Angular expression - so no need for the {{}}
ng-click="order('CategoryParent' + parentCategory.Count)"
I am using an ng-switch in angularjs to have dynamic content in my page, dependent on the url. And I am managing my project with yeoman. Here is the code of the dynamic content generation:
html:
<div class="div-content bgcontent" id="content">
<span ng-switch on="renderPath[0]">
<div ng-switch-when="home" ng-include="'partials/home.html'"></div>
<div ng-switch-when="gallery" ng-include="'partials/gallery.html'"></div>
</span>
</div>
controller:
$scope.renderPath = $location.path().split('/');
// remove first entry because it's empty string
$scope.renderPath.shift();
This works perfectly well when running the stuff with 'yeoman server'. But if I build with 'yeoman build:minify', it doesn't work anymore afterwards. It hits an assertion:
at assertArg (http://host:8888/scripts/vendor/d10639ae.angular.js:973:11)
at Object.ngDirective.compile (http://host:8888/scripts/vendor/d10639ae.angular.js:13474:5)
at applyDirectivesToNode (http://host:8888/scripts/vendor/d10639ae.angular.js:4047:32)
at compileNodes (http://host:8888/scripts/vendor/d10639ae.angular.js:3794:14)
at compileNodes (http://host:8888/scripts/vendor/d10639ae.angular.js:3799:14)
at compile (http://host:8888/scripts/vendor/d10639ae.angular.js:3739:29)
at update (http://host:8888/scripts/vendor/d10639ae.angular.js:13685:22)
at $get.Scope.$broadcast.next (http://host:8888/scripts/vendor/d10639ae.angular.js:8002:24)
at Array.forEach (native)
at forEach (http://host:8888/scripts/vendor/d10639ae.angular.js:110:11) <!-- ngSwitchWhen: home -->
Does someone know how to fix this? Or where I need to look to debug it?
If you are using dependency-injection within your scripts, make sure to use the minify-proof syntax as described here: http://docs.angularjs.org/guide/di