Menu
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?
261
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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
