在browserify中使用jquery插件以及角度

Question

我試圖使用名爲tipso的工具提示插件。我使用角度與browserify作爲我的依賴管理器。

除了插件外，我已經爲我做了一切工作。每個小東西在瀏覽器中都有點困難，但這似乎變成了一場噩夢。

我跟着tipso的文檔很簡單。但是當我運行該應用程序時，我不斷收到一條錯誤消息，聲明在Chrome控制檯中顯示Uncaught TypeError: $(...).tipso is not a function。

這是我broserify-墊片配置

"browserify-shim": { 
    "jquery": "$", 
    "bootstrap": { 
    "depends": [ 
     "jquery" 
    ] 
    }, 
    "tipso": { 
     "depends": [ 
      "bootstrap" 
     ] 
    } 
    } 

我已經要求TIPSO

var tipso = require('tipso'); 

這是我如何TIPSO

//runs when DOM is completely loaded 
angular.element(document).ready(function ($http, $rootScope) {  
    $('.tipso').tipso(); 
}); 

任何建議可以理解的初始化。

Answer 1

我終於想通了，我希望這可以幫助別人。

1. 關鍵是要暴露的jQuery在全球範圍內（我知道我不應該這樣做，這樣做的另一種方法是將其暴露的地方我希望插件工作）。

   global.$ = global.jQuery = require('jquery'); 
   

2. 一旦做到這一點，我們就能組成一個角指令

   rootModule.directive('cooltip', function() { 
       return { 
        restrict: 'A', 
        link: function (scope, element, attributes) { 
         $(element).tipso({ 
          position: 'right', 
          delay: 600 
        }); 
        } 
       }; 
   }); 
   

3. 使用此指令使用HTML

   <button cooltip class="btn"> Hover over me </button> 
   

元素上應用jQuery插件的屬性

根據jQuery插件和它的功能決定指令類型（Element，Attri bute，評論等）。

Answer 2

如果您使用它的錯誤類似於$(...).tipso，並且您需要按照您的Browserify Shim配置，請求jQuery爲$，我假設Tipso是一個jQuery插件。你需要指定這一點，取決於jQuery的，就像這樣：

"browserify-shim": { 
    "jquery": "$", 
    "bootstrap": { 
    "depends": [ 
     "jquery" 
    ] 
    }, 
    "tipso": { 
     "depends": [ 
      "jquery", 
      "bootstrap" 
     ], 
    "exports": "$.fn.tipso" 
    } 
    }