jqueryプラグインをブラウザで使用して角で表示

Question

tipsoというツールチッププラグインを使用しようとしています。そして、私はdependency managerとしてbrowserifyと一緒に角度を使用しています。

私はこのプラグインを除いてすべて私のために働いています。すべての小さな事はブラウジングで少し難しくなっていますが、これは悪夢に変わっているようです。

私はかなり簡単なtipsoのドキュメントに従ってきました。しかし、私がアプリを実行すると、クロムコンソールにUncaught TypeError: $(...).tipso is not a functionというエラーメッセージが表示され続けます。

これは、私はこれは私がどれ提案が理解されるであろう

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

tipso初期化されてきた方法です

var tipso = require('tipso'); 

tipso必要としていた私のbroserifyシム設定

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

です。

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ブー、コメントなど）。

Answer 2

エラーごとに$(...).tipsoのようなものを使用していて、Browserify Shim設定ごとにjQueryを$とする必要がある場合は、TipsoがjQueryプラグインであると仮定しています。これをjQueryに依存するように指定する必要があります。

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