1

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

除了这个插件，我已经为我准备好了一切。在 browserify 中，每一件小事都变得更加困难，但这似乎正在变成一场噩梦。

我遵循了tipso的文档，这非常简单。但是当我运行该应用程序时，我不断收到一条错误消息，说明Uncaught TypeError: $(...).tipso is not a function在 chrome 控制台中。

这是我的 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();
});

任何建议将不胜感激。

4

2 回答 2

1

我终于想通了，我希望这对某人有所帮助。

  1. 诀窍是在全局范围内公开 jQuery（我知道我不应该这样做，替代方法是在我希望插件工作的任何地方公开它）。 

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

  2. 完成后，我们将创建一个 Angular 指令

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

  3. 使用此指令将 jQuery 插件的属性应用于 html 中的元素

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

根据 jQuery 插件和它的功能决定指令类型（元素、属性、注释等）。

于 2016-05-07T13:49:42.220 回答
0

如果您$(...).tipso按照错误使用它，并且$根据 Browserify Shim 配置需要 jQuery，我假设 Tipso 是一个 jQuery 插件。您需要指定它依赖于 jQuery，如下所示：

 "browserify-shim": {
   "jquery": "$",
   "bootstrap": {
     "depends": [
       "jquery"
     ]
   },
   "tipso": {
       "depends": [
           "jquery",
           "bootstrap"
       ],
    "exports": "$.fn.tipso"
    }
  }
于 2016-04-29T15:13:15.007 回答