terranisu / angular-emoji-picker

A simple Emoji picker

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Directive does not work

hamidhadi opened this issue · comments

commented

When I add this line of code to my project, I don't get any emoji picker and the span is empty.
<span style="margin: 0 20px;" emoji-picker="fidiPlusPost.Message" placement="right" title="Emoji" recent-limit="12"></span>

But it's generated the i tag, however, it's not showing me anything.

Hi @hamiid. Thanks for your feedback. I'll try to look into it, but I can't tell you when exactly :(

commented

Hi @terranisu. Thanks for your response.

i had that issue until i added the css lib/angular-emoji-picker/dist/css/emoji-picker.css
check to ensure that it is added

Hey!
@hamidhadi @terranisu any news about that issue? I am having the same trouble.

As @ulurusolutions said, I have checked the emoji-picker.css is being downloaded and libraries is being loaded.

I am using Angular 1.6, maybe an version trouble?

Thanks in advance!

In my case it did not work because in the template "templates/emoji-button-bootstrap.html" were used old Angular UI Bootstrap directives.

I fixed it like this:

angular.module("templates/emoji-button-bootstrap.html", []).run(["$templateCache", function ($templateCache) {
	$templateCache.put("templates/emoji-button-bootstrap.html",
		"<i class=\"emoji-picker emoji-smile\"\n" +
		"   uib-popover-template=\"'templates/emoji-popover-bootstrap.html'\"\n" +
		"   popover-placement=\"{{ !placement && 'left' || placement }}\"\n" +
		"   popover-title=\"{{ title }}\"></i>\n" +
		"");
}]);

Thanks!! I will try it like you did!

I replaced directive template within a decorator, like this:

`// get the angular-emoji-picker module
    angular.module('vkEmojiPicker').config(emojiPickerConfig)

function emojiPickerConfig($provide) {
    $provide.decorator('emojiPickerDirective', emojiPickerDecorator);

    function emojiPickerDecorator($delegate) {

        var directive = $delegate[0];

        directive.templateUrl = "template-path/your-template.html";

        return $delegate;

    }
};`