Ng-directive's link function's element instance is different from general vs Ionic?


#1

Would there be difference of ng-directive’s link function’s parameter element’s instance to be different value between general angularJS and Ionic framework?

I am in middle of converting my MEAN stack web app into mobile app using Ionic framework, since the element instance that I am getting with angular.element(element) within link function gives me a value that I can not query through ng-directive’s template HTML, I will have to use general jquery to find that element which seems to take longer…?

[general ng-directive link function:]
console.log(“test:”, angular.element(element));
and debug console shows below–>
test: [div]0: divlength: 1__proto__: Object[0]
test: [div.ng-scope, selector: “”, context: div.ng-scope]0: div.ng-scopecontext: div.ng-scopelength: 1selector: ""proto: n[0]

[Ionic framework ion-conent ng-directive link function:]
console.log(“test:”, angular.element(element));
and debug console shows below–>
test: [div]0: divlength: 1__proto__: Object[0]


Would there be possibility of ng-directive's link function's parameter element's instance to be a different value between "general angularJS" vs "Ionic framework"?
#2

you do not need to run angular.element on the element in the link function, because it is already a jqlite/jquery object ;).

I do not had any problems in my projects to work with that element as expected.

I would try to avoid including jquery because you can destroy the proposed usage for dom-elements in angularjs.


#3

I am including jquery for specific google map inforWindow class modification.

for specific use to modify google’s map css

var iwOuter = $(’.gm-style-iw’);

      var iwBackground = iwOuter.prev();
      // Remove the background shadow DIV
       iwBackground.children(':nth-child(2)').css({'display' : 'none'});

@bengtler do you know what is the best way to reach to template url’s html of ng-directive?
I was trying to reach that using ‘element’ parameter of link function but it does not work…


#4

look in this codepen:

But i made the experiences that you can not style the maps afterwards (because you can break the functionality). But you can define a layout via javascript during Map-Creation.

A nice site with style and code:


#5

Thanks for great resources.

I was able to solve the problem above with element.children() and so on…


#6

Yeah but this is really slow and so you get the correct styled map from google :wink: