问题 AngularJS绑定jQuery qTip2插件

我试图弄清楚如何用角度绑定工具提示的内容。我有一个看起来像这样的指令：

的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插件从这里

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

<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被加载到工具提示中，但这会阻止角度正常运行 - 当button.html加载到弹出窗口时，ng-click不起作用。那是因为角度不知道它。

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

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

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

所以我的问题是：

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

更新1 当从HTML转换为javascript时，确保从snake-case转到camelCase。所以 init-toolbar 在HTML中转换为 initToolbar 在javascript中。

这是一个工作样本： 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不知道它应该绑定到它。你告诉角度使用 $编译。我对qTip2插件知之甚少，但如果加载模板，则编译它 $compile(template)(scope); 然后交给qTip2，你会得到你期望的结果。

如果可能，您可以提供一个小代码片段。我经历了角度文档，他们总是在指令中定义的模板上调用$ compile。在这种情况下，我指的是jqueryObject（qTip），它不一定是模板，内部内容也指向url（button.html）。对不起，我不太清楚$ compile以及如何使用它。 - Naveed

是的，我试图制作一个傻瓜，但由于某种原因，它下来。我稍后会检查并尝试发布一些东西。 - Jason More

根据我的理解，因为qTip使用jQuery应用于元素，所以不会应用对运行时qtip对象的更改。例如，如果我们改为：bottom middle => at：top right（通过将参数传递给指令）将不起作用。 - masimplo

@ mxa055我不确定你的意思。如果您只想在指令上设置配置属性，则可以通过属性执行此操作。如果要在运行时动态更改它，则必须使用$ scope。$ watch - Jason More

问题 AngularJS绑定jQuery qTip2插件

答案:

热门问题