Run jQuery plugin diff2html inside an Angular directive with noconflict

Question

I'm trying to format a diff inside an Angular directive using diff2html and var jq = $.noConflict();

I've created an Angular constant to hold jQuery and am passing it into the directive as so:

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');
                    });
                }
            }
        }]);
})();

The Problem

When it runs, I get the following error:

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

Debugging this you can see that when Diff2HtmlUI is instantiated it tries to set the body and this likely fails due to the conflict with var jq = $.noConflict();.

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

How can I fix this issue? I was hoping passing in jQuery as $ would override the noconflict conflict?

add jquery before angular, remove this constant cause it is useless. Defininf function($http, $) is funny but not doing anything... — Petr Averyanov
– Petr Averyanov, Commented May 5, 2017 at 16:44
@PetrAveryanov jQuery is already defined as the first include. That answer was suggested here: stackoverflow.com/questions/34402898/… — Dan
– Dan, Commented May 5, 2017 at 19:42
See this demo, I cannot reproduce the bug: plnkr.co/edit/hLnuvQ9kHRRdsaHYK3SS?p=preview — Maria Ines Parnisari
– Maria Ines Parnisari, Commented May 7, 2017 at 19:34
Question edited, issue is related to var jq = $.noConflict(); — Dan
– Dan, Commented May 8, 2017 at 8:54

Preview · Accepted Answer · 2017-05-08 03:26:00Z

1

I don't really get why you are passing jQuery down to your directive. Since you loaded it directly, you and diff2html already have access to it through the global window object.

Also, you probably just want to pass the directive element instead of an external div id, just pass it as $(elem) since it expects a jQuery object or DOM query string.

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="[email protected]" data-semver="1.6.2" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.js"></script>
    <script data-require="[email protected]" 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>

answered May 8, 2017 at 3:26

Preview

35.9k10 gold badges95 silver badges113 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Dan Over a year ago

Question updated, related to var jq = $.noConflict(); and Angular running after this.

Preview Over a year ago

With $ still injected in the directive? can you try removing it?

Collectives™ on Stack Overflow

Run jQuery plugin diff2html inside an Angular directive with noconflict

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related