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.
Related
I want to create a set of pills with all the states with their number of electors and I want the pill that is clicked becomes active. So, my unsuccesful attempt for this matter is as follows:
<ul class="nav nav-pills">
<li ng-class="{ active:tab.isSet(x.name) }" ng-repeat="x in states">
<a href ng-click="tab.setTab(x.name)">{{x.name}} <span class="badge">{{x.elector}}</span></a>
</li>
</ul>
And, inside my controller I have this piece of code for that matter:
$scope.tab = "Alabama";
$scope.isSet = function(checkTab) {
return $scope.tab === checkTab;
};
$scope.setTab = function(activeTab) {
$scope.tab = activeTab;
};
By the way, at first I tried to make the pills active by comparing their indices but that didn't help. It would be even better if you can help me with a way to do this using the indices. I apologize if there is already a posted solution to this but I couldn't find it.
Thanks in advance!
<ul class="nav nav-pills">
<li ng-class="{ 'active':tab.isSet(x.name) }" ng-repeat="x in states">
<a href ng-click="tab.setTab(x.name)">{{x.name}} <span class="badge">{{x.elector}}</span></a>
</li>
</ul>
Note the quotes around active
I found it, I should've deleted the "tab"s in "tab.isset(...)".
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.
Working version Angular 1.0.7 plunkr
Not working version Angular 1.2.1 plunkr
In angular 1.0.7, the following ngInclude worked fine:
<li class="dropdown" id="header_notification_bar" data-ng-include="" src="'notifications.tpl.html'" data-ng-controller="NotificationsCtrl"></li>
notifications.tp.html looks like this:
<a href="#" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-close-others="true">
<i class="icon-warning-sign"></i>
<span class="badge">{{notifications.length}}</span>
</a>
<ul class="dropdown-menu extended notification">
<li>
<p>You have {{notifications.length}} new notifications</p>
</li>
<li>
<ul class="dropdown-menu-list scroller" scroller style="height: 250px">
<li data-ng-repeat="n in notifications" >
<a href="#">
<span class="label label-success"><i class="icon-plus"></i></span>
{{n.summary}}
<span class="time">{{n.time}}</span>
</a>
</li>
</ul>
</li>
<li class="external" >
See all notifications <i class="m-icon-swapright"></i>
</li>
</ul>
in Angular 1.2.1, the template gets loaded but it seems the view is not bound to the controller/scope.
if you run the 2 plunkrs above and click the exclamation point, you will see that only Angular 1.0.7 shows notification items.
I have read the "Migrating from 1.0 to 1.2" documentation found here but do not see anything relevant. Perhaps I am missing something.
Anyone help?
Thanks,
Dan
It looks to be a change made in passing the controller through to the ng-include. As #Sarah pointed out, it is probably a scope change.
Here is a plunker that is working.
I moved the ng-controller into the template itself and it seems to be working again. But had to wrap the template in a div (not ideal, I know).
<div data-ng-controller="NotificationsCtrl">
I also added the template src to the ng-include since it is a bit cleaner that way:
<li class="dropdown" id="header_notification_bar" data-ng-include="'notifications.tpl.html'"></li>
Hope this helps.
I have this CSS selector, which just won't bind .live(), but works perfectly with .bind():
$('.treeView li ~ :has("ul")').prev('li')
I've read somewhere, that using the .prev() and .next() could be troublesome coupled with .live(), so I wanted to create an pure CSS selector (or ANYTHING that works with .live()!) to do the job - but I just can't figure it out!
Here's what I want to do:
Select all li-elements, which is followed by an li containing an ul.
Here's an HTML markup example, I want to select the ones where the comment says "selected"
<div class="treeView" id="processSegmentsTree">
<ul>
<li>Ostetanke</li> //selected
<li>
<ul>
<li>Tank 1</li>
<li>Tank 2</li>
</ul>
</li>
<li>Presse</li> //selected
<li>
<ul>
<li>Sub-leaf 1</li>
<li>Sub-leaf 2</li> //selected
<li>
<ul>
<li>test</li>
<li>test</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
Any help is much appreciated, since this is a bit of a thorn in my eye :(
There is no such Selector to accomplish this task.
What I highly recommend you to do is to add ANYTHING as a flag to use when selecting your desired elements.
add attribute, wrapper, ANYTHING YOU WANT, then the task will be as easy as it should be.
This may work: // not css selector
$(".treeView li:has('ul')").prev();