ngRoute angularjs 未显示 emojionearea 拾取图标答案

【问题标题】：emojionearea pickup icon is not displaying with ngRoute angularjsngRoute angularjs 未显示 emojionearea 拾取图标
【发布时间】：2017-02-24 18:26:30
【问题描述】：

我正在尝试使用angularjs 的ngRoute 来实现http://mervick.github.io/emojionearea/，但没有成功。

如果我删除 ngRoute 路由页面，它可以正常工作，但如果 index.html 有 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'
        });

});

这里是 plunker：https://plnkr.co/edit/HoBx5HCTB5W8OkO37Wwm，它不起作用。

这是 plunker：https://plnkr.co/edit/hCTy20oJHbAFIhIDlj5l 在没有 ngRoute 的情况下工作。

非常感谢！爱丽儿。

【问题讨论】：

标签： jquery angularjs angularjs-ng-route

【解决方案1】：

这只是放置脚本的问题。正如here 中所建议的那样，您应该在 angular 之前包含 jquery，以便对模板中的 js 进行评估。您还需要将 emojionarea 脚本放入索引中：

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>

检查我的你的 plunker 的 fork https://plnkr.co/edit/myZY8d2Rx4Oz0l67WDYf

【讨论】：