在浏览器中使用jquery插件以及angular [英] using jquery plugin in browserify along with angular

问题描述

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

I am trying to use a tooltip plugin called tipso. And I am using angular along with browserify as my dependency manager.

除了这个插件，我已经为我准备了一切。每一个小东西在浏览器中都变得有点困难，但这似乎变成了一场噩梦。

I have everything working out for me except for this plugin. Every little thing is little harder in browserify but this one seems to be turning into a nightmare.

我遵循了tipos的文档，这很简单。但是当我运行该应用程序时，我不断收到一条错误消息，指出未捕获的TypeError：$（...）。tipso在chrome控制台中不是一个函数。

I have followed the documentation of tipso which is pretty simple. But when I run the app, I keep getting an error message stating that Uncaught TypeError: $(...).tipso is not a function in the chrome console.

这是我的broserify-shim配置

This is my broserify-shim config

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

我需要小费

var tipso = require('tipso');

这是我初始化tipo的方式

This is how I have initialized tipso

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

任何建议都会受到赞赏。

Any suggestion will be appreciated.

推荐答案

我终于弄清楚了，希望对您有所帮助。

I finally figured it out, I hope this helps someone.

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

1. The trick is to expose jQuery in the global scope (I know I am not supposed to do this and the alternative for this is to expose it wherever I want the plugin to work).

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

完成后，我们将创建Angular指令

Once that is done, we'll make an Angular directive

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

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

Use this directive to use apply the jQuery plugin's properties on an element in html

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

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

Depending on the jQuery plugin and it;s funtionality decide on the directive type (Element, Attribute, Comment etc).

这篇关于在浏览器中使用jquery插件以及angular的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！