如何将emojionearea正确集成到angularjs指令

时间:2018-10-23 17:44:25

标签: javascript angularjs

来自https://github.com/mervick/emojionearea/

Emojionearea在一个简单的单个index.html文件上工作正常,但是,我无法在angularjs指令上使用它。以下是我用

测试过的代码

index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="./emojionearea/dist/emojionearea.css">
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
  <title>Document</title>
</head>

<body style="margin: 50px">
  <div ng-app="myApp">

    <msg-area> </msg-area>


    <script src="script.js"></script>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
      crossorigin="anonymous"></script>
    <script type="text/javascript" src="./emojionearea/dist/emojionearea.min.js"></script>
    <script type="text/javascript">
      $(document).ready(function () {
        $("#example1").emojioneArea({
          pickerPosition: "bottom"

        });
      })
    </script>
</body>

</html>

dir.html

<div>
  <textarea placeholder="Comment..." autofocus="true" ng-model="msg" ng-trim="false" id="example1"></textarea>
</div>

script.js

angular
  .module("myApp", [])


  .directive("msgArea", function () {
    return {
      restrict: 'EA',
      replace: false,
      templateUrl: 'dir.html',
      scope: {
        msg: '='
      }
    };
  });

上面的代码有时在刷新大量页面后仍然有效。

0 个答案:

没有答案