angularjs integration

[rkimaoui]

Hi there,

Thank you for this amazing job.
How can in integrate the picker with angularjs application ?

i Hope to see an angular version.

Thanks !

[chamnap]

+1

[ghost]

+1

[floooat]

+1

[SebMenozzi]

+1

[dylanjha]

this can be done with a custom directive, I don't think it is within the scope of this library to support a integration into one specific framework

[saade]

Yes... I created a filter who converts plain text in emoji using emojione.shortnameToImage.

something like this:

app.filter('emojify', function() { return function(input) { return emojione.shortnameToImage(input); } });

and used {{ input | emojify }}.

But... If you have to bind html, i suggest to create a custom directive, and link function will come like this..

link: function(scope, element, attrs){ var template = '<div class="post-content"><div class="post-content-text">'+emojione.shortnameToImage(scope.post.text[0])+'</div></div>'; element.append(template); }

Hope it helps Someone ⛅

[SamarRizvi]

When I import wdt-emoji-bundle.min.js and emoji.min.js (I am using JSPM and es6 style of coding), and then, when I use wdtEmojiBundle.init, I get error "wdtEmojiBundle is not defined"

[nageshd3]

@samar that is obvious, since wdtEmojiBundle is not imported. You've to find a way whereby you get access to all the methods inside wdtEmojiBundle object. In angular style for web, I would directly use it as $scope.wdtEmojiBundle.

[SamarRizvi]

@nageshd3 I am using controller as methodology and I have used this.wdtEmojiBundle but still same error.

[saade]

@SamarRizvi if you are using angular 2 with typescript:

you need to declare wdtEmojiBundle with

declare var wdtEmojiBundle:any;

[Exponent500]

@nageshd3 @SamarRizvi

I am having the same issue as @nageshd3 and I am using angular1. I'm trying to get the emoji picker to display inside of an input field that's found within an html template associated with a controller. When I try to init this bundle in the controller (by way of a simple this.wdtEmojiBundle.init() in the controller, I get the same error that @nageshd3 had.

As others have suggested, it seems this is not meant to be used within an angular app.

[LeiwenL]

Hi, I'm having some issue, I'm trying to install for angular 2 & typescript, but I don't understand how to implement this 😞 someone can help me please ?

[rajkuttie]

Same issue here .. ! I can't integrate

[Tikoriya]

My issue is when i want to execute wdtEmojibundle.init(''.my-input-selector") it tells me it's not a constructor :/ And I'm not sure where exactly i could be wrong? Did someone also had the same issue?

[needim]

@VLazzarova Can you try with capital letter of B: wdtEmojiBundle.init

[Tikoriya]

@needim It's actually how I wrote it, wrote it with a typo inhere 🙈
So after i add the scripts and i call my function.. do i have to initialize the ** wdtEmojiBundle** Object somewhere else?

[needim]

@VLazzarova Oh this is an issue about Angular :/ I'm not familiar with Angular :/

[Tikoriya]

@needim I found sth. I think it throws me the error cause of the EmojiConvertor. In the init function it calls this constructor, so it throws me the error it's not a constructor. It actually prints the EmojiConvertor on the console as _ (and my error is exactly: " _ is not a constructor")
Some thoughts on that may be?

[needim]

@VLazzarova hmm emoji.min.js is a dependency. It's in the repo. Maybe you missed that part?

[nageshd3]

@VLazzarova check the file emoji.min.js is being loaded when you initialize controller. If you are lazy loading, try to load this library file serially.

[Tikoriya]

@needim yep, that was it! I was loading wdt-emoji-bundle.min.js first and then the emoji.min.js
Thank you for the help ! 🙌🏼

[needim]

@VLazzarova nice! I guess I'm not good at documentation section, I will work on that. :/

[topseySuave]

@needim a getting this error what do you think could be the problem..? Uncaught TypeError: Cannot read property 'querySelector' of null
at Object.h.init (wdt-emoji-bundle.min.js:16)
at

[adeopura4]

If anyone has been able to make an integration with AngularJS work for the emoji picker, please do share the code/repo.