emojionearea pickup icon is not displaying with ngRoute angularjs

Question

I'm trying to implement http://mervick.github.io/emojionearea/ using ngRoute of angularjs without success.

If I remove the ngRoute routing pages it works without any errors, but if index.html has the source of Emoticons.html.

index.html

<!DOCTYPE html>
<html>
    <head lang="en">
      <title>Example</title>
      <meta charset="utf-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1">

      <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.js"></script>

      <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular-route.min.js"></script>
      <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <script src="main.js"></script>

      <style type="text/css">

        body {
            background-color: #006699;
        }

      </style>

</head>
    <body>

      <div ng-app="mainApp">
        <ng-view></ng-view>
      </div>

    </body>
</html>

home.html

<!DOCTYPE html>
<html>
<head>
    <title>AngularJS</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

  </head>

  <body ng-controller="HomeController">

        <div class="container" style="color: #FFFFFF">

            <h2> Home</h2>

            <ul class="nav">

                <li> <a href="#/Emoticons" style="color: #FFFFFF"> Emoticons</a> </li>

            </ul>

        </div>

 </body>
</html>

Emoticons.html

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Emojione-area</title>

  <link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/mervick/emojionearea/master/dist/emojionearea.min.css">
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
  <script type="text/javascript" src="https://cdn.rawgit.com/mervick/emojionearea/master/dist/emojionearea.min.js"></script>


</head>
<body>

    <textarea id="example1"> 
      Smile  ghost  umbrella ☔ dephin .
    </textarea>

    <div>
                <a href="#/home" style="color: #FFFFFF"> Home</a>
        </div>

  <script type="text/javascript">
  $(document).ready(function() {
    $("#example1").emojioneArea({
      autoHideFilters: true,
      pickerPosition: "bottom",
      tonesStyle: "radio"
    });
  });
</script>

</body>
</html>

main.js

'use strict';

var mainApp = angular.module("mainApp", ['ngRoute']);

mainApp.config(function($routeProvider,$locationProvider) {

    //http://stackoverflow.com/questions/41211875/angularjs-1-6-0-latest-now-routes-not-working
    //https://docs.angularjs.org/guide/migration#commit-aa077e8
    $locationProvider.hashPrefix('');

    $routeProvider
        .when('/home', {
            templateUrl: 'home.html',
            controller: 'HomeController'
        })
        .when('/Emoticons', {
            templateUrl: 'Emoticons.html',
        })
        .otherwise({
            redirectTo: '/home'
        });

});

Here is the plunker: https://plnkr.co/edit/HoBx5HCTB5W8OkO37Wwm that is not working.

Here is the plunker: https://plnkr.co/edit/hCTy20oJHbAFIhIDlj5l working without ngRoute.

Thank you so much! Ariel.

score 0 · Accepted Answer · edited May 23 '17 at 12:25

It's just a problem of placing the scripts. As suggested in here, you should include jquery before angular so the js in template got evaluated. You also need to put emojionarea script in the index:

index.html

<!DOCTYPE html>
<html>
    <head lang="en">
      <title>Example</title>
      <meta charset="utf-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1">

      <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
      <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.js"></script>
      <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular-route.min.js"></script>
      <script type="text/javascript" src="https://cdn.rawgit.com/mervick/emojionearea/master/dist/emojionearea.min.js"></script>

        <script src="main.js"></script>

      <style type="text/css">

        body {
            background-color: #006699;
        }

      </style>

</head>
    <body>

      <div ng-app="mainApp">
        <ng-view></ng-view>
      </div>

    </body>
</html>

Check my fork of your plunker https://plnkr.co/edit/myZY8d2Rx4Oz0l67WDYf

emojionearea pickup icon is not displaying with ngRoute angularjs

index.html

home.html

Emoticons.html

main.js

1 Answers1