Запустите плагин jQuery diff2html внутри директивы Angular с помощью noconflict

Я пытаюсь отформатировать diff внутри Angular директивы, используя diff2html и var jq = $.noConflict();

Я создал угловую константу для хранения jQuery и передаю ее в директиву так:

app.js

(function () { //IIFE to enable strict mode
    'use strict';

    angular.module('dashboard', ['ui.router', 'ngSanitize'])
        .config(['$interpolateProvider', function ($interpolateProvider) {
            $interpolateProvider.startSymbol('[[[').endSymbol(']]]');
        }])
        .constant('jQuery', window.jQuery);
})();

directive.js

(function () { //IIFE to enable strict mode

    'use strict';

    angular.module('dashboard')
        .directive("loadDiff", ['$http', 'jQuery', function($http, $) {
            return {
                restrict: "A",
                link: function(scope, elem, attrs) {

                    $http.get("diff url here").success(function (data) {
                        var diff2htmlUi = new Diff2HtmlUI({diff: data});
                        diff2htmlUi.draw('#line-by-line');
                    });
                }
            }
        }]);
})();

Эта проблема

Когда он запускается, я получаю следующую ошибку:

TypeError: $ is not a function at Diff2HtmlUI._initSelection at new Diff2HtmlUI

Отладка этого вы можете увидеть, когда Diff2HtmlUI создается экземпляр, он пытается установить тело, и это, вероятно, не удается из-за конфликта с var jq = $.noConflict();,

  Diff2HtmlUI.prototype._initSelection = function() {
    var body = $('body');
    var that = this;

Как я могу исправить эту проблему? Я надеялся перейти в JQuery как $ будет переопределять конфликт noconflict?

Источник

1 ответ

Я действительно не понимаю, почему вы проходите мимо jQuery вплоть до вашей директивы. Поскольку вы загрузили его напрямую, вы и diff2html уже есть доступ к нему через глобальный window объект.

Кроме того, вы, вероятно, просто хотите передать директиву element вместо внешнего идентификатора div, просто передайте его как $(elem) так как он ожидает объект JQuery или строку запроса DOM.

angular.module('dashboard', [])
  .config(['$interpolateProvider', function ($interpolateProvider) {
    $interpolateProvider.startSymbol('[[[').endSymbol(']]]');
  }])
  .constant('jQuery', window.jQuery)
  .directive('loadDiff', ['$http', function ($http) {
    return {
      restrict: 'A',
      link: function (scope, elem, attrs) {

        $http({
          url: 'https://api.github.com/repos/rtfpessoa/diff2html/pulls/106.diff',
          headers: {
            accept: 'application/vnd.github.v3.diff'
          }
        })
        .then(function (resp) {
          var diff2htmlUi = new Diff2HtmlUI({ diff: resp.data });
          diff2htmlUi.draw($(elem));
        })
          
      }
    }
  }]);
<html>

  <head>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/diff2html/2.3.0/diff2html.min.css" rel="stylesheet"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/diff2html/2.3.0/diff2html.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/diff2html/2.3.0/diff2html-ui.js"></script>
    <script data-require="angular.js@1.6.2" data-semver="1.6.2" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.js"></script>
    <script data-require="jquery@3.1.1" data-semver="3.1.1" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  </head>

  <body ng-app="dashboard">
    <div load-diff="load-diff">Loading diff...</div>
  </body>
  
</html>

Источник
Другие вопросы по тегам