Custom directive issue

ionic-v1
1

Hi everyone,

Firstly, I’d like to point out that I’m new to both AngularJS and Ionic. However, I think I’m grasping the basic concepts quite easily.

I have a problem, and I think I know what’s causing it - but I don’t know the best way of solving the problem.

Basically, I have a custom directive called <bars>. It gets replaced, and becomes a simple animated bar chart.

It works perfectly fine, until I switch to another view that also has the custom directive.

Instead of adding the new bar chart data to the new <bars> directive (from my new view), it’s instead adding to my previous view, as the page is swiping left.

I think it’s because of the way Ionic slides from one view to the next (which I like). I think the previous view isn’t triggering the $destroy event until the new view has loaded. BUT my directive is trying to render before the $destroy event, which is causing my new bar chart data to be added to the previous view, and not my new view.

Does that make sense?

Solutions I’ve tried, but I’m not happy with

  • I’ve manually triggered the $destroy event with an ng-click. It worked, but then it doesn’t look very nice when transitioning from one view to the other.

  • I’ve also tried adding another directive, but that goes against the DRY concept I’m trying desperately to adhere to.

I’m not using jQuery, as it sorta contradicts AngularJS - but if I was, I’d use something like $('bars').last(). As it would always apply to last <bars> found, but I realise Angular doesn’t quite work like that.

Any solutions? I’m sure it’s staring me right in the face.

Thanks!

2

using pure jquery is the wrong way for angularjs beginners to learn and understand the intentions of angular.

if you want your directive in another view, you have to include are add your directive in the other view.
Directives are there, to do dom-manipulation only in a restricted way and dom-node.

Maybe you can show us your code… so we can help.

3

Sorry, my mistake. It wasn’t a fault of Ionic/AngularJS. It was a bug in my own code whilst using D3.js

For anyone that also uses D3, d3.select('.xx') only selects the first element it encounters, I needed the last element.

Sorry, was totally convinced it was an Ionic fault, but I wasn’t far off. It was actually because Ionic does have 2 views in the viewport during transitions.