Search code examples
jqueryangularjsangularjs-ng-route

emojionearea pickup icon is not displaying with ngRoute angularjs

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.

Solution

  • 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