Hi Michael! Huge thanks for sharing.

This line
<ul><li dir-paginate="item in [1,2,3] | itemsPerPage: 12">yo</li></ul>
renders as a comment when delegated to ng-repeat:
<ul><!-- ngRepeat: item in [1,2,3] | itemsPerPage: 12 --></ul>

With a larger collection, the correct number of controls will be displayed by dir-pagination-control, but the pageNumbers are blank.

I suspect this is something simple - I'm just learning Angular, so apologies in advance.

Cheers,
Mike

I do not specify 'template-url' parameter for dir-pagination-controls, it uses the default value. I have downloaded ''dirPagination.tpl.html" template. But I'm getting the error:

XMLHttpRequest cannot load file:///home/user/project/dirPagination.tpl.html
Cross origin requests are only supported for HTTP.

Currently the pagination directive has the limitation that only one instance can exist on a page at once.

There have been a couple of people requesting a way to have multiple instances, and this could be achieved by allowing some kind of identifier to be specified which would link the dir-pagination-controls directive with a specific dir-pagination directive.

In this way you could have an arbitrary number of paginations running on one page simultaneously.

Hello, I am trying to find a working example and when navigating to the Plunkr link demo it just says "Loading..." and never changes. Can you confirm it works? Thank you!

I seem to be encountering a problem displaying the paged results when the results (i.e. rows in a table) are contained in the Bootstrap.UI tab component.

I've stepped through code to see what might be happening but a paged result collection does seem to be returned from the itemsPerPage filter when called for the pagination id concerned, just no results are actually rendered. The pager itself does render with the expected number of pages.

I don't get any script errors either suggesting I may have configured dirPagination incorrectly.

Also, the same markup / expression works fine outside of the component, so this leads me to believe it is the component causing some confusion.

Any ideas why this may be? I was hoping the paging would work within these tabs.

I'm fairly new to Angular, so apologies for my lack of knowledge.

I really like it! But inside ng-repeat, each dir-terminal-type types out the inner text of the first. I'm pretty sure the originalNodeValues concept isn't surviving the transclusion done by ng-repeat, but I haven't see the answer yet.

I suspect that this is not issue of your directive, but anyway each comment on my app rendering on each page with comment section.
I'm passing the unique identifier as an attribute and use ng-bind-ready, cause I'm using async data loading. Also I've checked that directive see my identifier.
I'm using angular routes without HTML5 mode and without any hash prefix (only # sign).
Do you have any ideas how to solve it?

The directive appears to be 'slicing' the collection prior to the application of any angularjs custom filter that may be applied to the ng-repeat. This can result in some of the items not being displayed. In my application I have 5 filtered rows which would appear on pages 1 and 2 of the unfiltered collection. When applying the filter, only the rows that would have originally appeared on page 1 appear and the ones form page 2 do not. There are no pagination controls after applying the filter because the total filtered items are less than itemsPerPage. If I increase itemsPerPage I see all of the filtered rows.

Here's the bit of code that calls the directive. If I use a standard ng-repeat then the rows are displayed as expected.

                                <!-- <tr ng-repeat="row in mapList | orderBy: predicate | filterMaps : formData.mapTypeRadio : filterCriteria">-->

                                <tr dir-paginate="row in mapList | orderBy: predicate | itemsPerPage: 10 | filterMaps : formData.mapTypeRadio : filterCriteria">
                                    <td><a href=" />#/map/MapSource{{row.dataMapId}}">{{ row.DataMapName }}</a></td>
                                    <td>{{ row.ClientName }}</td>
                                    <td>{{ row.SetName }}</td>
                                    <td>{{ row.CreatedBy }}</td>
                                    <td>{{ row.CreatedOn | date: 'MM-dd-yyyy' }}</td>
                                    <td>{{ row.LastModifiedBy }}</td>
                                    <td>{{ row.LastModifiedOn | date: 'MM-dd-yyyy' }}</td>
                                        <div class="input-group input-group-btn inline">
                                            <a ng-href="#/Map/MapSource/id/{{row.DataImportId}}" class="pointer fa fa-edit fa-2x"></a>
                                        </div>
                                        <div class="input-group input-group-btn inline" style="margin-left: 20px;">
                                            <a ng-click="deleteItem(row)" class="task-del"><i class="fa fa-trash-o fa-2x text-danger"></i></a>
                                        </div>
                                    </td>
                                </tr>

I tried modifying your existing plunker to show this, but I can't get the directive to work at all with a custom filter: http://plnkr.co/edit/zstCuFpPRULJQOAHF4qZ

In order to show November, the date format string should be 'd MMMM yyyy'

Thanks for the module - works wonders :)

Hi. Your library is very good but I cannot find any info about how to change page number in url.
For example:
http://example.com/users?page=2
I want to load data for second page on controller init and change page number on click on other page.
I use ui-router if it can help.

Excuse my knowledge on this as I am very new to angular. I have a bit of code that gets some json through ajax, specifically an object of objects. Using ng-repeat works fine (no pagination). But if I implement dirPagination, the results do not paginate and no pagination links are displayed (I am including the itemsPerPage filter). But if I change the object of objects to an array of objects, dirPagination works as expected.

Is this a known issue? I could push each object into a referential array (and I may just do that), but angular overall seems fine with object containers or array containers (ng-repeat etc).

I am ok with either way, I am just curious if this is WAI/known.

Oh yeah, almost forgot - Thanks for the spectacular suite of utils, you rock!

ng-bind-html working in ng-repeat but not with dir-paginate

<div dir-paginate="items in data | filter:q | itemsPerPage: pageSize" current-page="currentPage"> 

                    {{items.title}} //Working
                    <div ng-bind-html="items.title"></div> // not working

 </div>

When i try to use ng-bind-html in dir-paginate, it is giving me error message as follows:

Hello,

Getting the following error in console:

pagination directive: the pagination controls cannot be used without the corresponding pagination directive. <dir-pagination-controls class="ng-scope ng-isolate-scope"> 

The code we are using us as follows:

<dir-pagination-controls class="ng-scope ng-isolate-scope"></dir-pagination-controls>

<table>
  <thead>
    <tr>
      <th>
        <a ng-click="setCriteria('ticket_id')">Ticket ID</a>
      </th>
      <th>
        <a ng-click="setCriteria('subject')">Subject</a>
      </th>
      <th>
        <a ng-click="setCriteria('type')">Type</a>
      </th>
      <th>
        <a ng-click="setCriteria('timestamp')">Created</a>
      </th>
      <th>
        <a ng-click="setCriteria('priority_name')">Priority</a>
      </th>
    </tr>
  </thead>
  <tr dir-paginate="ticket in tickets | orderObjectBy : criteria : direction | itemsPerPage: 10" ng-if="ticket.type == 'Closed'">
    <td id="byTicket_id"><a ng-href="#/support/ticket/{{ticket.ticket_id}}" style="color: black;">{{ticket.ticket_id}}</a></td>
    <td id="bySubject"><a ng-href="#/support/ticket/{{ticket.ticket_id}}" style="color: black;">{{ticket.subject}}</a></td>
    <td id="byType">{{ticket.type}}</td>
    <td id="byTimestamp"><a href="" style="border-bottom: 1px dashed #000; color: black; text-decoration: none;" tooltip-placement="right" tooltip="{{virtualmachine.created}}">{{ticket.timestamp * 1000 | date:'yyyy-MM-dd HH:mm:ss Z' | timeago}}</a></td>
    <td id="byPriorty_name">{{ ticket.priority_name }}</td>
  </tr>
</table>

Any assistance would be appreciated.

I am developing kiosk application. And pagination there is only Next page and previous page. I need only modify template for pagination control to implement it??

Hi Michael!
Nice work,
Although I have an issue :
I'm using x-editable(Angular) for edit in place, but when i add a new row(form) to the table it is obviously added to the 1st page.
What i want here to happen is : When i add a new row i want the pagination to reset to 1st page so that the user can enter details and hit save.

Since this module seems to be pretty popular and is probably used in production in a few places, it should be published as a Bower package to simplify installation and versioning.

From the little research I have done so far, it seems like there is a way to publish a sub-directory of a repository on Bower by using Git's sub-module feature.

Brought up here #4 but deserves its own issue.

When the textbox or input on which the dir-tagbox is declared has an ng-model declaration, the model will only be updated if it is a direct property of the $scope, but not if it is a property of an object on the $scope.

Works:

<input type="text" ng-model="inputVal" dir-tagbox="tags">

Does not work

<input type="text" ng-model="myModel.inputVal" dir-tagbox="tags">

This seems to be due to this line: https://github.com/michaelbromley/angularUtils/blob/master/src/directives/tagbox/dirTagbox.js#L151

scope.$parent[attrs.ngModel] = output;

In the second case above, a new value gets created on the parent $scope - $scope['myModel.inputVal'], rather than $scope.myModel.inputVal.

The solution is to somehow parse the attrs.ngModel so that it gives a reference to the actual object property, rather than having it interpreted as a string, as seems to be the case presently.

I'm looking for a way to show the controls at the top of the table as well as at the bottom. If I put them above I get the following error in the console:

pagination directive: the pagination controls (id: blnTbl) cannot be used without the corresponding pagination directive.

The paginated table is in a directive, which is inside another directive, which then prints out the table to the screen.

Thanks.

currently the hashtag autocomplete directive isn't accessible to screenreaders, here are some resources:

http://www.w3.org/TR/wai-aria-practices/#autocomplete
http://www.w3.org/TR/wai-aria/states_and_properties#aria-autocomplete
http://oaa-accessibility.org/example/10/

TypeError: Cannot read property 'assign' of undefined
at setCurrentPage (http://localhost:3000/js/dirPagination.js:246:30)

This happens from the $watch() of currentPage. Oddly pagination does work. Being a newcomer to angular not sure what exactly is wrong.

The documentation on using breadcrumbProxy with uiBreadcrumbs has a demo at:

http://plnkr.co/edit/bBgdxgB91Z6323HLWCzF?p=preview

However, there is a typo in the demo where the data.proxy field is defined, instead of data.breadcrumbProxy, for state home.users. If I change it to

      data: {
        breadcrumbProxy: 'home.users.list'
      }

then the demo does not display Users in the breadcrumbs. For example, for Alan Partridge the breadcrumbs are:

Home / ALAN PARTRIDGE

Instead of:

Home / Users / ALAN PARTRIDGE

I think there is a bug in the implementation of breadcrumbs for for abstract states.

Thanks much for sharing this code.

Regards

Hi,

Is it possible to always display the controls even when there is only one page. I understand it would have no function and buttons would be disabled, but it would provide a consistent view on the site.

Thanks in advance for the help.

Alex

I'm trying to install the pagination. The page items are iterated over just fine. But the bar does not display. I did copy the .tpl.html file into its proper location and did make sure it was loaded.

The controller:

  $scope.page = pageNumber;
  $scope.totalPages = 0;
  $scope.size = size;

  loadPage($scope.page);

  $scope.pageChange = function(newPage) {
    loadPage(newPage);
  };

  function loadPage(pageNumber) {
    AdminService.search(searchTerm, pageNumber, size, sort, function(data) {
      $scope.admins = data.content;
      $scope.totalPages = data.page.totalPages;
    });
  }

The markup:

<dir-pagination-controls direction-links="true" boundary-links="true" on-page-change="pageChange(newPageNumber)" template-url="modules/utils/view/dirPagination.tpl.html"></dir-pagination-controls>
<div dir-paginate="admin in admins | itemsPerPage: size" current-page="page" total-items="totalPages">
  <input type="text" ng-model="admin.id">
  <input type="text" ng-model="admin.firstname">
  <a ui-sref="/admins/edit({adminId: admin.id})" class="btn">{{ 'EDIT' }}</a>
  <a ui-sref="/admins/delete({adminId: admin.id})" class="btn">{{ 'DELETE' }}</a>
</div>

I noticed when I tried to use the dir-paginate directive on an element that was a child of a div that was conditionally show using ng-if, the dir-paginate did not properly display. When ng-if was replaced with ng-show, the dir-paginate directive worked normally.

Sample structure where dir-paginate appears to not work correctly.

<div ng-if="someCondition()">
<div dir-paginate="item in items | itemsPerPage:someNumber ....>{{item}}</div>
</div>

<textarea ng-model="content" autofocus on-enter="controller.enter()" dir-tagbox="controller.usernames" dir-tagtoken="@"></textarea>

Because of the autofocus tag I never manually focus on my textarea, thus scope.isFocussed is always false, which means the suggestions box is never shown until I click outside my textarea and back into it.

I got following error. Any help would be appreciated
SyntaxError: syntax error
ul class="pagination" ng-if="1 < pages.length"

Hi, I am getting the following error on clicking on any of the pagination links. Could you please advise as to what would be causing this? Thanks.

[15:58:50.284] "Error: instances[instanceId].currentPageParser.assign is not a function
@http://localhost:8080/psi4web/js/dirPagination.js:299
.link/scope.setCurrent@http://localhost:8080/psi4web/js/dirPagination.js:213
Za.prototype.functionCall/<@https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.2/angular.min.js:190
qc[c]</<.compile/</</f@https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.2/angular.min.js:218
k.prototype.$eval@https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.2/angular.min.js:120
k.prototype.$apply@https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.2/angular.min.js:121
qc[c]</<.compile/</<@https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.2/angular.min.js:218
n.event.dispatch@http://code.jquery.com/jquery-1.11.0.min.js:3
n.event.add/r.handle@http://code.jquery.com/jquery-1.11.0.min.js:3"

Here are the relevant code pieces

<tbody>
     <tr dir-paginate="entity in entities | itemsPerPage: 20" current-page="1">
          <td ng-repeat="(key, value) in entity.nameValues">{{value}}</td>
     </tr>  
</tbody>

<div>
      <dir-pagination-controls boundary-links="true" template-url="./js/dirPagination.tpl.html">
      </dir-pagination-controls>
</div>

Currently the twitter hashtag popover stays open even when the input is blurred. I've implemented a solid menu blur by:

1. focusing the menu when the user starts navigating (will need set tabindex=-1 for this)
2. adding blur handlers to the input and the menu
3. in the handler determine if document.activeElement is the either the input, the menu, or a child of the menu
4. if not, close the menu

You can't do a typical "outerclick" because:

1. that doesn't handle keyboard navigation (tab away from the input)
2. <select> tags don't propogate events up to the body.

When it does start from total-items=0, it does not appear.
But if it is already appearing, and total-items change to 0, it will have the whole same amount of page numbers, even though there is not a single data at all.

Hi,

When I include dirPagination, I get this warning over and over:

"WARNING: Tried to load angular more than once."

Other modules I import don't cause that warning.

var app = angular.module('myapp', [
    'ngRoute',
    'ngResource',
    'ipCookie',
    'ui.router',
    'ngSanitize',
    'textAngular',
    'ui.select2',
    'restangular',
    'ngQuickDate',
    'flow',
    'angularFileUpload',
    'angularUtils.directives.dirPagination',
    'angularMoment'
]);

Any ideas?

It seems that the on-page-change callback function set on dirPaginationControls is called twice when the current page is changed.

Steps:

1. Navigate to the Plunker example with the console open.
2. Click on page 2.

Expected:
One call to the pageChangeHandler function.

Actual:
Console shows duplicate calls to the pageChangeHandler function.

meals page changed to 2 script.js:48
meals page changed to 2 script.js:48

Is there something I'm missing (a simple fix) or a workaround for this? Using this utility for an asynchronous implementation would duplicate the network call if it is included in the callback.

In the demo as well as my own code I notice that the spacing between crumbs in the breadcrumb trail is not uniform.

Notice that there is more space after the "/" than before it.

This seems to be caused by the template for the directive and (perhaps) the fact that Angular inserts comments into the DOM (comments around ng-repeat's, ng-if's, etc.).

The template for the breadcrumb trail inserts line breaks between the <li> and <a> tags that make up each breadcrumb element. It looks like this line break is part of the problem.

I can mitigate the issue somewhat by changing the template to remove those line breaks:

Modified template:

`

1. {{ crumb.displayName }} {{ crumb.displayName }}

(NOTE: the above may not make the changes that I've made very noticeable. But the only line breaks in this template are after the opening <ol> tag AND before the closing </ol> tag.)

Also, note that I've inserted an   after the displayName. That seems to even out the spacing. I think this   is necessary to mitigate the effects of Angular adding comments to the DOM. In doing so, Angular seems to be inserting line breaks between the elements in the directive template.

I'm not sure how to best solve this. Note that if you look at the breadcrumb example on the Bootstrap site, that they do not insert line breaks in between the <li> and <a> tags. And if you do insert them that, you start to see the uneven spacing.

I think the template I pasted above is an OK solution, but I don't like that we have to stray from the Bootstrap example (by inserting the  . Wondering if you have any thoughts about how to make the spacing between crumbs more uniform.

I've been working with the pagination directive. By basic setup is a single page which allows the user to enter search criteria and then click search to see the results. The results are displayed on the same page, below the search input fields. The pagination is working great, but let's say the user goes to page 3 and then decides to do a new search. The user changes the search criteria, clicks search again but the pagination controller is never reset to 1...item 3 is still highlighted.

What is the proper way to reset the pagination control back to page 1? I tried binding current-page to a var in my scope and reseting that, but that doesn't seem to change state of the pagination controller.

Any ideas? Thanks!

I downloaded your demo project in plnkr(http://plnkr.co/edit/Wtkv71LIqUR4OhzhgpqL?p=preview) and replaced the "data-require" script with local javascript files like

  <script src="angular.js" language="javascript" type="text/javascript"></script>
  <script src="jquery-1.7.min.js" language="javascript" type="text/javascript"></script>

Then I run in IE8(Simulated by IE 11 F12 tool) . At first I got this problem : Unknown runtime error , I tracked down the source and found the scene of accident

forEach({
  removeData: jqLiteRemoveData,

  dealoc: jqLiteDealoc,

  on: function onFn(element, type, fn, unsupported){
    if (isDefined(unsupported)) throw jqLiteMinErr('onargs', 'jqLite#on() does not support the `selector` or `eventData` parameters');

    var events = jqLiteExpandoStore(element, 'events'),
        handle = jqLiteExpandoStore(element, 'handle');

    if (!events) jqLiteExpandoStore(element, 'events', events = {});
    if (!handle) jqLiteExpandoStore(element, 'handle', handle = createEventHandler(element, events));

in createEventHandler

// Remove monkey-patched methods (IE),
    // as they would cause memory leaks in IE8.
    if (msie <= 8) {
      // IE7/8 does not allow to delete property on native object
      event.preventDefault = null;
      event.stopPropagation = null;
      event.isDefaultPrevented = null;
    } else {

I don't ready know what happened but i fix this problem by placing "jquery-1.7.min.js" before "angular.js" .

And then i got this "Unexpected call to method or property access.undefined" , i found the solution here(angular/angular.js#1933). You should always set " replace : true " when you use a " restrict:'E' " ! (user-defined tags are not supported by IE 8 by default.)

I am trying to implement this concept from Michael's comment on his blog post to get index of the item that is clicked. So, that I can then use it to perform splice on the array to remove that item in UI.

My code looks like this:

Template markup:

<table class="table table-responsive table-hover table-condensed">
            <thead>
                <tr>
                    <th class="col-md-2">Name</th>
                </tr>
            </thead>
            <tbody>
                <tr dir-paginate="client in clients | filter: queryByClientName | itemsPerPage: 5 | orderBy: orderProp" data-ng-controller="RepeatController" current-page="currentPage">
                    <td>
                        <span>{{ client.name }} {{currentPage}}</span>
                        <span class="pull-right">
                          <a class="btn btn-default" data-ng-click="removeAClient(number, client, 'sm')"><span class="glyphicon glyphicon-remove"></span></a>
                         </span>
                    </td>
                </tr>
                <tr></tr>
            </tbody>
        </table>

        <dir-pagination-controls></dir-pagination-controls>

I get this clients array from a service. As you can see in the markup, I'm using current-page attribute as well as trying to print the currentpage in the column. With current-page attribute, I get my table drawn on UI with a Name column but with no records i.e. tr or tds. When I remove this attribute, I see all the records properly. However, the currentPage is not displayed in the UI as it doesn't have any value.

To get the number i.e. actual index of the item that is clicked, I'm using Michael's concept that you can find in the shared link above.

I'm just a noob, so maybe I'm doing something wrong.

http://plnkr.co/edit/wtHtZ2zBSpexbOQGAxeu?p=preview

When there is a filter on the collection, e.g.

<li dir-pagination="item in items | filter: searchInput | itemsPerPage: 10">...</li>

if the filter is such that the collection is reduced to zero (i.e. the search term is not found in any items in the collection), then the resulting list empties (correct), but the pagination links generated by dirPaginationControls remain (*incorrect).

The pagination links should not be displayed as soon as the list is filtered to zero results.

I used bower to get your program. I have to modify dirPagination.js line 23 (var templatePath) to avoid an error. When bower installs your program, it is installed to bower_componenets\angular-utils-pagination. However, dirPagination.js looks for it in directives/pagination, and it is not there.

To get it to work I have to move/copy the file to directives/pagination. Shouldn't it just look for the file in the same directory as it is in? Otherwise, I have to use this workaround (copy the file manually), which is not desirable, and when you update the file (it would be updated via bower) I'd have to re-copy the file.

I am running into an issue with the breadcrumbs when the parent states are abstract. Below is an example using the mean.io boilerplate. I updated the routes to use your breadcrumb directive. The issue I run into is that the "Articles" breadcrumb is an abstract state and therefore be used as a route. I get this error: "Cannot transition to abstract state 'article'" What do you suggest for a workaround? I would think that more devs besides me would want to use abstract states to build the breadcrumbs... Thanks.

// states for my app
        $stateProvider
            .state('articles', {
                url: '',
                abstract: true,
                template: '<ui-view/>',
                resolve: {
                    loggedin: checkLoggedin
                },
                data: {
                    displayName: 'Articles'
                }
            })
            .state('articles.all articles', {
                url: '/articles',
                templateUrl: 'articles/views/list.html',
                data: {
                    displayName: false
                }
            })
            .state('articles.create article', {
                url: '/articles/create',
                templateUrl: 'articles/views/create.html',
                data: {
                    displayName: 'New Article'
                }
            })
            .state('articles.edit article', {
                url: '/articles/:articleId/edit',
                templateUrl: 'articles/views/edit.html',
                data: {
                    displayName: '{{ article.title }}'
                }
            })
            .state('articles.article by id', {
                url: '/articles/:articleId',
                templateUrl: 'articles/views/view.html',
                data: {
                    displayName: '{{ article.title }}'
                }
            });

I used the angular directive as in the readme.

unfortunately it doesn't work it does compile even though the flag exists.

Here's a my test website:
http://goo.gl/bkjowJ

Hi,

the readme states:

First you need to include the module in your project, and make sure that the templateUrl is pointing to the correct location of the dirPagination.tpl.html file.

but I think it should be pointed out, WHERE to set the templateURL.
Even better: make it configurable so that people don't need to change the lib.

Hi,

I love your elegant solution for pagination + filtering with ng-repeat. Very tight. I need however, to extend it into a tree view that has the same features. Got any suggestions?
Thanks,

Arthur

Unique pagination-ids

But one control will 'next page' both instances

http://plnkr.co/edit/DMy61BvTePb2yyPxVVlp?p=preview

Hi Michael
First, thanks for your pagination solution. I is exactly what I was looking for.

I've run into a problem when using it in IE 8 where I have a table of users to display. Each row has an ng-click directive attached so that when a row is clicked that specific user's details are displayed in a modal dialog. When I run the application in Firefox or Chrome everything works as intended, but when run in IE 8 clicking a row in the table causes a chain reaction where ng-click is fired for every single row in the table, displaying a modal dialog for every single user all at once, and IE 8 ends up hanging.

Here's the code:

...
<tr dir-paginate="user in users | orderBy:orderByField:isReverseSort | itemsPerPage:15"
    current-page="paginationCurrentPage"
    ng-click="openUserDetailsModal(user)">
  <td>user.name</td>
...

I found out that attaching the ng-click directive to each <td> element in a row instead of to the <tr> element solves the problem, but I can't imagine this is the desired behavior.

I would like to have my collection paginated, but I would like to have a filter text box at the top of the table where a user can start typing and it'll show everything matching what they are typing.

How would I go about doing this with your pagination ?

I'd like to be able to use the following syntax, like I did with normal ng-repeat:

dir-paginate = "item in filteredItems = (items | filter: myfilter | itemsPerPage:10)"

But it throws an error at the moment.

I'm using Angular 1.3.0.rc1

If you consider something like this (for a chat module):

<textarea ng-model="controller.message" on-enter="controller.enter()" dir-tagbox="controller.usernames" dir-tagtoken="@"></textarea>

When the user presses the enter key in the textarea I want to submit the form, but of course if the user starts typing "@username", presses the down arrow and then enter, I want the dirTagBox directive to run its keydown handling first, doing e.preventDefault(); if the enter was on a suggestion.

Sadly though no matter what I try my own keydown handler is always run before your directive has a change to preventDefault. Do you have any suggestion on how to deal with this?

Would you mind adding version tags so that I can be confident that the code won't change out from under me if I include it using bower?

For instance:

<header dir-paginate-start="item in items">
    Header {{ item }}
  </header>
  <div class="body">
    Body {{ item }}
  </div>
  <footer dir-paginate-end>
    Footer {{ item }}
  </footer>

I'm working on the page pabloleone.bitbucket.org. There is a list of projects and each one loads the disqus directive at the bottom.

The first page works, but when the page is changed the disqus directive is not loaded for the new page, and does not load anymore, even in the previous page where was working at first load.

I'm using the ! prefix at the url, because I had problems with HTML5 mode and using ready-to-bind because I'm getting the data by ajax.

The project is using AngularJS 1.2.16.

The page code is available at https://bitbucket.org/pabloleone/pabloleone.bitbucket.org/src.

Ideas?