Reliably getting the active View in DOM

I’m working on 2 directives that get dynamically compiled (rather than in HTML) and need access to the active view in the DOM.

Unfortunately querySelector on [nav-view=“active”] isn’t reliable as the directive is compiled before the active/cached view stuff has been sorted out.

Additionally I have a view that can’t be cached, so its getting removed and appended so the view indexes change.

I have even tried using ionicHistory’s currentView().index however as I stated the indexes change so this isn’t reliable.

Any thoughts?


Never mind! a simple $timeout was good enough to let ionic finish doing its thing. If anyone is interest in the plugin check it out! Facebook style info/error banner. Just published to Bower!

Ionic Content Banner

another approach would be to do hang in the dom-node for the directive after the view is active and fully entered
or use the $ionicView.enter-Event in your directive and get the currentView after that

PS: add you directive to npm. it is more and more favorised than bower :wink:

@bengtler Cool i have to make it browserify compatible first but will do.

The reason I can’t use enter is because this is a service level directive meaning that it is only called via a service, rather than a directive you would place directly in HTML like the actionsheet. When you call $…) , a new isolate scope is created, but even listening to enter on rootScope gave me inconsistent results for the active view if one or more disabled caching (due to the appending/removing views from DOM).

But I got it working now, so it’s all good! thanks!

Not sure it’s related but…
I want to get from a dataservice some text which includes svg like this :
....text <div class="MathJax_SVG_Display" style="text-align: center;"><span style="font-size: 100%; display: inline-block;" class="MathJax_SVG" id="MathJax-Element-1-Frame"><svg xmlns:xlink="" width="4.15ex" height="5.176ex" style="vertical-align: -1.838ex;" viewBox="0 -1437.2 1787 2228.5" role="img" focusable="false"><g stroke="currentColor" fill="currentColor" stroke-width="0" transform="matrix(1 0 0 -1 0 0)"><g transform="translate(120,0)"><rect stroke="none" width="620" height="60" x="0" y="220"></rect><use x="60" y="676" xlink:href="#STIXWEBMAIN-31"></use><use x="60" y="-697" xlink:href="#STIXWEBMAIN-32"></use></g><g transform="translate(860,0)"><use x="213" y="0" xlink:href="#STIXWEBMAIN-32"></use><use x="0" y="728" xlink:href="#STIXWEBMAIN-2192"></use></g></g></svg></span></div> text....

The dataservice gives the STIXWEBMAIN definitions that are called in the text :
<defs id="MathJax_SVG_glyphs"><path stroke-width="1" id="STIXWEBMAIN-31" d="M394 0h-276v15c74 4 95 25 95 80v449c0 34 -9 49 -30 49c-10 0 -27 -5 -45 -12l-27 -10v14l179 91l9 -3v-597c0 -43 20 -61 95 -61v-15Z"></path><path stroke-width="1" id="STIXWEBMAIN-32" d="M474 137l-54 -137h-391v12l178 189c94 99 130 175 130 260c0 91 -54 141 -139 141c-72 0 -107 -32 -147 -130l-21 5c21 117 85 199 208 199c113 0 185 -77 185 -176c0 -79 -39 -154 -128 -248l-165 -176h234c42 0 63 11 96 67Z"></path><path stroke-width="1" id="STIXWEBMAIN-20D7" d="M-17 654l-132 -106l-18 8c32 27 49 49 49 56c0 12 -16 15 -49 15h-286v54h286c28 0 49 2 49 15c0 9 -21 27 -50 56l18 8Z"></path><path stroke-width="1" id="STIXWEBMAIN-2192" d="M856 258v-10c-96 -41 -172 -115 -238 -191l-20 19c23 33 52 65 82 96c9 9 14 20 14 28c0 10 -8 20 -26 20h-598v66h599c10 0 26 12 26 22c0 9 -4 15 -14 25c-29 28 -60 63 -82 96l20 19c65 -75 141 -150 237 -190Z"></path></defs>

The problem is that when I hard code these definitions it works, but when I want to put them in the dom with
where I have in my page.ts
this.definition = <defs..../defs>;
It doesn’t work. I presume that is because they arrive too late ? How to get them loaded before the text is called ?