The following code is giving me Error: [$parse:syntax] in console.
<ul class="nav navbar-nav" ng-repeat="webpage in first.webpages">
<li><a href ng-click="tab = {{webpage.id}}">{{webpage.name}}</a></li>
</ul>
ng-repeat is properly working for {{webpage.name}} only, not for {{webpage.id}} which is placed inside ng-click directive. When I try to print {{tab}} nothing shows up.
I believe you don't need double braces inside angular elements. And you need to call the parent scope when in ng-repeat :
ng-click="$parent.tab = webpage.id"
It should be:
<ul class="nav navbar-nav" ng-repeat="webpage in first.webpages">
<li><a href ng-click="tab = webpage.id">{{webpage.name}}</a></li>
</ul>
You don't need to interpolate anything when you are inside ng-click since it does it for you.
Related
I have a really weird problem. I am using $interpolateProvider in my Angular app as I am passing some variables with Node which is "{{ }}" by default so I have set Angular's symbols to be: "{[ ]}".
See below:
mainApp.config(function($interpolateProvider) {
$interpolateProvider.startSymbol('{[');
$interpolateProvider.endSymbol(']}');
});
Now, this works everywhere except in one part of my app. See the HTML below:
<ul class="nav navbar-nav navbar-right" ng-controller="navBarController">
<li>Profile</li>
<li>
<notification-icon count="{[notificationsCount]}"><i class="fa fa-envelope-o fa-2x"></i></notification-icon>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown">Settings<strong class="caret"></strong></a>
<ul class="dropdown-menu">
<li>
Profile Settings
</li>
<li class="divider"></li>
<li>
Logout
</li>
</ul>
</li>
{[notificationsCount]}
</ul>
The bit that doesn't work is:
count="{[notificationsCount]}"
The bit that does work is right at the end:
{[notificationsCount]}
On the browser, I get this error from Angular and when I inspect the element, it is in plain text like: {[notificationsCount]} and doesn't get converted to the number which is does on the 2nd last line of the HTML code.
I suspect this might be due to the 3rd party module I am using, which is angular-notification-icons but I can't be sure.
I have no idea how to proceed with this. Any input will help.
Thanks a lot!
You need write without {[]} in place where the code doesn't work
<notification-icon count="notificationsCount"><i class="fa fa-envelope-o fa-2x"></i></notification-icon>
look carefully at the examples from https://github.com/jacob-meacham/angular-notification-icons , notificationsCountused directly such as directive attributes.
Is it possible to do the following:
<li><a ng-click="letterFilter = {section:'{{bound.value}}'}">{{bound.value}}</a></li>
to get the following output using ng-repeat and a JSON file to supply the data via $http
<li><a ng-click="letterFilter = {section:'A'}">A</a></li>
<li><a ng-click="letterFilter = {section:'B'}">B</a></li>
Thanks
Additional Information:
JSON
[{"section": "A"},{"section": "B"},{"section": "C"}]
HTML
<ul ng-controller="letterController" class="pagination">
<li ng-repeat="letter in letters"><a ng-click="letterFilter = {section: letter.section}">{{letter.section}}</a></li>
</ul>
app.js
.controller('letterController',['$scope','$http',function($scope,$http){
$http.get('data.json').success(function(data){
$scope.letters= data;
})
}])
ng-click evaluates an angular expression, so just reference the variable directly without the {{ }}. For example:
<a ng-click="letterFilter = { 'section': bound.value }">{{bound.value}}</a>
I'm starting out with some AngularJs practises and I would like to create dynamic pages based on a JSON file.
Upon loading the page I get the following error:
Error: [$parse:syntax] http://errors.angularjs.org/1.4.2/$parse/syntax?p0=%7B&p1=invalid%20key&p2=23&p3=SelectedPage.SetPage(%7B%7Bpage.Number%7D%7D)&p4=%7Bpage.Number%7D%7D)
at Error (native)
at http://localhost/AngularJs/scrpts/angular.min.js:6:416
at Object.q.throwError (http://localhost/AngularJs/scrpts/angular.min.js:209:32)
at Object.q.object (http://localhost/AngularJs/scrpts/angular.min.js:208:357)
at Object.q.primary (http://localhost/AngularJs/scrpts/angular.min.js:205:335)
at Object.q.unary (http://localhost/AngularJs/scrpts/angular.min.js:205:174)
at Object.q.multiplicative (http://localhost/AngularJs/scrpts/angular.min.js:204:434)
at Object.q.additive (http://localhost/AngularJs/scrpts/angular.min.js:204:261)
at Object.q.relational (http://localhost/AngularJs/scrpts/angular.min.js:204:96)
at Object.q.equality (http://localhost/AngularJs/scrpts/angular.min.js:203:425) <a ng-click="SelectedPage.SetPage({{page.Number}})" href="#">
the problem occurs in this templateUrl: navigation.html
<nav>
<ul>
<li ng-repeat='page in Pages'>
<a ng-click='SelectedPage.SetPage({{page.Number}})' href="#">{{page.Name}}</a>
</li>
</ul>
</nav>
My guess is that the {{ }} syntax doesn't get accepted here but i'm not sure.
the directive call is as follows:
.directive('navigationPart', function(){
return {
templateUrl: 'components/navigation.html'
};
})
I do get this element code in Html so in a way it does what i ask.
<nav>
<ul>
<!-- ngRepeat: page in Pages --><li ng-repeat="page in Pages" class="ng-scope">
<a ng-click="SelectedPage.SetPage(1)" href="#" class="ng-binding">Index</a>
</li><!-- end ngRepeat: page in Pages --><li ng-repeat="page in Pages" class="ng-scope">
<a ng-click="SelectedPage.SetPage(2)" href="#" class="ng-binding">Who</a>
</li><!-- end ngRepeat: page in Pages -->
</ul>
</nav>
I would like to know what i'm doing wrong (why the error gets thrown)...
Here in this line:
<a ng-click='SelectedPage.SetPage({{page.Number}})' href="#">
You need to change it to:
<a ng-click='SelectedPage.SetPage(page.Number)' href="#">
The reason is that ng-click expects an Angular expression, which is evaluated on click. Double curly braces do not represent a valid expression token and Angular complains about it, raising an error.
If you find this a bit confusing, remember that the double curly braces syntax ({{...}}) is used to bind the model values to the DOM, while a lot of built-in directives work a bit differently - you don't bind anything in there, but instead need to provide an expression that is then evaluated in the element's scope.
Try changing
<a ng-click='SelectedPage.SetPage({{page.Number}})' href="#">{{page.Name}}</a>
to
<a ng-click='SelectedPage.SetPage(page.Number)' href="#">{{page.Name}}</a>
In ng-click, you access the page variable directly, no need for the braces. In other words, your guess is right.
I've got a Bootstrap navbar dropdown menu, where clicking the parent link produces the dropdown list (default behaviour). The dropdown list of the parent is built using ngRepeat from an array of navigation data, and each has a ui-router state parameter, so it looks like:
<li class="dropdown">
<a href class="dropdown-toggle" data-toggle="dropdown">
Parent Link
</a>
<ul class="dropdown-menu" role="menu">
<li ng-repeat="item in navCtrl.items()"
ui-sref-active="active">
<a ui-sref="some.state({ paramKey: paramValue })">
{{item.link}}
</a>
</li>
</ul>
</li>
But, even though it does seem to drop the active class on my link it throws this error in the console:
TypeError: Cannot read property 'name' of undefined
I am not entirely sure about the answer, but, as far as I know, why would you use navCtrl.items() using brackets? I have never seen it used like that before. Wouldn't the old item in items ng-repeat work? Sorry if it does not help at all.
I render recursive template with ngInclude. Here is my code:
<!--
definitionsRenderer.html
-->
<ul data-ng-if="currentLoc.definitions && templateIsloaded">
<li ng-repeat="definition in currentLoc.definitions">
{{definition.text}}
</li>
</ul>
<ul data-ng-if="templateIsloaded">
<li ng-repeat="loc in currentLoc.loc" ng-include="'./partials/definitionsRenderer.html'"></li>
</ul>
I need code to be executed asynchronous. So for scope of every included template
I want to have a variable - templateIsloaded with value false by default. When template is loaded and rendered it value to be true. How do that?
Best regards.
To have separate $scope for each of recursive called includes you can simply add ng-controller.
<li ng-repeat="loc in currentLoc.loc" ng-controller="definitionsRendererCtrl" ng-include="'./partials/definitionsRenderer.html'"></li>