Jquery and Collection-repeat slowness

1

In my index.html if I load the javascript libs in this order, the collection-repeat scrolling animation become very slow:

<script src="lib/jquery.js"></script>
<script src="lib/ionic/js/ionic.bundle.js"></script>

But if I do this order, all my Jquery click event stopped working in my Angular directives:

<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="lib/jquery.js"></script>
2

what do you need jquery for?
maybe you dont need it?

1 Like
3

I am looking at removing jquery now, I use it to catch things like click events and getting element references $(#element)

4

You can simply get DOM elements with document.querySelector() and then wrapping into an angular.element to access some jqlite functionalities.

5

did you use the click watch to go to child view?

if so you could use ng-click on a item and pass item index or item id with it.

about DOM elements see answer from @xMarston

6

Thanks for that. Can you give an example, one of my directive looks like this with Jquery,

link:function(scope, elem, attrs) {
		elem.click(function(e){
			scope.fullscreenImage.show();
		});
	}

So if I use ng-click, I would have to make a template in the directive and bind ng-click event to a function, right?

  template: '<a href="#" ng-click="fullscreenImage.show()"></a>'
7

my collection.repeat looks like this:

<ion-list>
	<ion-item class="item-avatar" href="#/tab/person/detail/{{item.personid}}"
		collection-repeat="item in data.list"
		collection-item-width="'100%'"
		collection-item-height="95" >
			{{item.name }}
	</ion-item>
</ion-list>

you could also use ng-click instead of href.(used coze i switch view)
something like this:

<ion-list>
	<ion-item class="item-avatar" ng-click="showFullScreanImg({{item.personid}})"
		collection-repeat="item in data.list"
		collection-item-width="'100%'"
		collection-item-height="95" >
			{{item.name }}
	</ion-item>
</ion-list>