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?
var jq = $.noConflict();– Incite