AngularJS 绑定 jQuery qTip2 插件答案

【问题标题】：AngularJS binding jQuery qTip2 pluginAngularJS 绑定 jQuery qTip2 插件
【发布时间】：2013-07-29 21:14:26
【问题描述】：

我正在尝试弄清楚如何将工具提示的内容与 Angular 绑定。我有一个看起来像这样的指令：

script.js

var myApp = angular.module('myApp', []);

myApp.directive('initToolbar', function(){
    return {
        restrict: 'A',
        link: function(scope, element, attrs)
        {
            $(element).qtip({
                content: {
                    ajax:
                    {
                        url: 'button.html'
                    }
                },
                position: {
                    my: 'bottom left',
                    at: 'bottom middle',
                    target: $(element)
                },
                hide: {
                    fixed : true,
                    delay : 1000
                }
            });
        }
    }
});

它使用qTip2插件from here

我的 index.html 看起来像这样（请注意，在实际文件中，我已将所有源代码都包含在 head 中，我只是不将其粘贴到此处以避免混乱）：

<body>
    <div initToolbar>
        <p>
            Hover over me. Hover over me. Hover over me.
        </p>
    </div>
</body>

和

button.html

<div ng-controller="myController">
    <button ng-click="someFunction()">Click me</button>
</div>

正如您在指令代码中看到的那样。 button.html 被加载到工具提示中，但是这会阻止 angular 正常工作——当 button.html 加载到弹出窗口时，ng-click 不起作用。那是因为 Angular 不知道。

我也知道 button.html 是有效的，因为只需添加

<ng-include src="'button.html'">

到 index.html 工作正常（即点击按钮执行 someFunction()）

所以我的问题是：

如何将工具提示的实际内容与角度绑定？如果不是内容，有没有办法绑定工具提示，让 Angular 知道它？我对 $scope.$apply() 很熟悉，但我不太清楚如何在这里使用它。

【问题讨论】：

嘿，我用一个有效的 plunkr 更新了我的答案。希望它仍然可以帮助您。 Plunkr 在我的办公室不工作 :-(

标签： angularjs angularjs-directive angularjs-scope qtip2

【解决方案1】：

更新 1 从 HTML 转换为 javascript 时，请确保从蛇形转换为驼峰转换。所以 html 中的 init-toolbar 转换为 javascript 中的 initToolbar。

这是一个工作示例：http://plnkr.co/edit/l2AJmU?p=preview

HTML

<div init-toolbar="">
  <p>
    Hover over me. Hover over me. Hover over me.
  </p>
</div>

Button.html

<div>
  <button ng-click="someFunction()">Click me</button>
</div>

JAVACRIPT

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';
  $scope.someFunction = function() {
    $scope.name = 'FOO BAR';
  };
});

app.directive('initToolbar', function($http, $compile, $templateCache){
    return {
        restrict: 'A',
        link: function(scope, element, attrs)
        {
          $http.get('button.html', {cache: $templateCache}).
            success(function(content) {
              var compiledContent = $compile(content)(scope);

              $(element).qtip({
                content: compiledContent,
                position: {
                  my: 'bottom left',
                  at: 'bottom middle',
                  target: $(element)
                },
                hide: {
                  fixed : true,
                  delay : 1000
              }
            });

          });

        }
    }
});

原创

按钮不起作用的原因是 angular 不知道它应该绑定到它。你告诉 Angular 使用$compile 来做到这一点。我对那个qTip2插件不太了解，但是如果你加载模板，然后编译它$compile(template)(scope);然后交给qTip2，你会得到你期望的结果。

【讨论】：

如果可能的话，你可以给一个小代码sn-p。我浏览了角度文档，他们总是在指令中定义的模板上调用 $compile。在这种情况下，我指的是一个 jqueryObject (qTip)，它不一定是一个模板，并且内部内容也指向一个 url (button.html)。抱歉，我还不太清楚 $compile 以及如何使用它。
是的，我试图做一个 plunkr，但由于某种原因它失败了。我稍后会检查并尝试发布一些内容。
据我了解，由于使用 jQuery 将 qTip 应用于元素，因此不会应用运行时对 qtip 对象的更改。例如，如果我们更改 at: bottom middle => at: top right （可能通过将参数传递给指令）将不会产生效果。
@mxa055 我不确定你的意思。如果你只想在指令上设置一个配置属性，你可以通过属性来做到这一点。如果你想在运行时动态改变它，你必须使用 $scope.$watch