与noconflict

我试图使用diff2html和var jq = $.noConflict();与noconflict

我创建了一个角度不变持有jQuery和我通过它进入指令格式化角指令内部差异的角度指令内运行的jQuery插件diff2html像这样：

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冲突？

来源

2017-05-05 Dan

附加的jquery，删除此恒定原因它是无用的。 Defininf函数（$ http，$）很有趣，但没有做任何事情...... –

@PetrAveryanov jQuery已被定义为第一个包含。这个答案是建议在这里：https://stackoverflow.com/questions/34402898/pass-jquery-dependency-to-angular-js-controller – Dan

看到这个演示，我不能重现该错误：http://plnkr.co/编辑/ hLnuvQ9kHRRdsaHYK3SS？p =预览 –

我真的不明白为什么你要将jQuery传递给你的指令。由于您直接加载它，因此您和diff2html已通过全局window对象访问它。

此外，您可能只是想通过指令element而不是外部div ID，只是将它作为$(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="[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>

前角

来源

2017-05-08 03:26:00

问题有关'var jq = $ .noConflict（）;'和Angular在此之后运行更新。 – Dan

在指令中仍然注入'$'？你可以尝试删除它吗？ –

回答

相关问题