Question

我正在尝试使用名为tipso的工具提示插件。我和angularify一起使用angular作为我的依赖管理器。

除了这个插件，我为我做了一切。浏览器中的每一个小东西都有点难度，但这个似乎变成了一场噩梦。

我已经按照tipso的文档进行了操作，这非常简单。但是当我运行应用程序时，我不断收到一条错误消息，指出Chrome控制台中的Uncaught TypeError: $(...).tipso is not a function。

这是我的broserify-shim配置

   "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

我终于明白了，我希望这有助于某人。

诀窍是在全局范围内公开jQuery（我知道我不应该这样做，并且替代方案是将它暴露在我希望插件工作的任何地方）。
```
global.$ = global.jQuery = require('jquery');
```

一旦完成，我们将制作一个Angular指令

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

使用此指令可以在html中的元素上应用jQuery插件的属性
```
<button cooltip class="btn"> Hover over me </button>
```

取决于jQuery插件及其功能; s功能决定指令类型（元素，属性，注释等）。

Answer 2

如果您按照错误$使用它，并且根据您的Browserify Shim配置要求jQuery为"browserify-shim": { "jquery": "$", "bootstrap": { "depends": [ "jquery" ] }, "tipso": { "depends": [ "jquery", "bootstrap" ], "exports": "$.fn.tipso" } }，我假设Tipso是jQuery插件。您需要指定它依赖于jQuery，如下所示：

gulp config

在browserify中使用jquery插件和angular

2 个答案: