Integrating angularjs plugin in ionic


#1

I am trying to solve the problem explained here : Image map doesn't work good

It is about integrating an angularjs plugin in an ionic application. The angularjs plugin work perfectly by itself, but is not working anymore when we add the ionic plugin.

Is there something special to do to add an angularjs plugin into an ionic application ?


#2

I’ve successfully imported other angular modules into my ionic project without problems, so I don’t think there’s anything special about it, generally speaking.


First impression with ionic
#3

At least it is not working for this module. And I am not the only one to have such problem with that plugin.

This is the error I am getting :

"Error: angular.element(...).resize is not a function
.link@http://localhost:8100/js/angular-rwdImageMaps.min.js:60:5
invokeLinkFn@http://localhost:8100/lib/ionic/js/ionic.bundle.js:16918:9
nodeLinkFn@http://localhost:8100/lib/ionic/js/ionic.bundle.js:16428:1
compositeLinkFn@http://localhost:8100/lib/ionic/js/ionic.bundle.js:15777:13
compositeLinkFn@http://localhost:8100/lib/ionic/js/ionic.bundle.js:15780:13
compositeLinkFn@http://localhost:8100/lib/ionic/js/ionic.bundle.js:15780:13
publicLinkFn@http://localhost:8100/lib/ionic/js/ionic.bundle.js:15656:30
bootstrapApply/<@http://localhost:8100/lib/ionic/js/ionic.bundle.js:10149:11
$RootScopeProvider/this.$get</Scope.prototype.$eval@http://localhost:8100/lib/ionic/js/ionic.bundle.js:23100:16
$RootScopeProvider/this.$get</Scope.prototype.$apply@http://localhost:8100/lib/ionic/js/ionic.bundle.js:23199:18
bootstrapApply@http://localhost:8100/lib/ionic/js/ionic.bundle.js:10147:9
invoke@http://localhost:8100/lib/ionic/js/ionic.bundle.js:12884:14
bootstrap/doBootstrap@http://localhost:8100/lib/ionic/js/ionic.bundle.js:10145:1
bootstrap@http://localhost:8100/lib/ionic/js/ionic.bundle.js:10165:1
angularInit@http://localhost:8100/lib/ionic/js/ionic.bundle.js:10059:5
@http://localhost:8100/lib/ionic/js/ionic.bundle.js:34824:5
trigger@http://localhost:8100/lib/ionic/js/ionic.bundle.js:11443:7
createEventHandler/eventHandler@http://localhost:8100/lib/ionic/js/ionic.bundle.js:11713:9
" "<img id="main_img" class="rwdimgmap" ng-src="img/home.jpg" usemap="#map_main_img" height="569" width="360">" ionic.bundle.js:20306:17

The error is triggered by this line :

// my_resize is a function
angular.element($window).resize(my_resize).trigger('resize');

Is ionic doing something to overload the resize function of angular ? Or any specific things to do for image manipulation with ionic ?


First impression with ionic
#4

Looks like that plugin needs jquery. Did you add jquery to your ionic project?


#5

Yes I did. Jquery 1.10.2


#6

What I discovered is that not only does jquery have to be linked in index.html, it must be linked before angular is loaded. For ionic, this means before the ionic bundle is loaded.