AngularJS结合的jQuery插件qTip2 [英] AngularJS binding jQuery qTip2 plugin
问题描述
我试图找出如何用角度工具提示的内容绑定。我有一个指令，看起来像这样：
I am trying to figure out how to bind the content of a tooltip with angular. I have a directive that looks like this:
的script.js
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看起来像这样（请注意，在实际的文件我已经包含在头上所有的来源，我只是不在这里粘贴为了避免混乱）：
My index.html looks like this (please note that in the actual file I have included all the sources in head, I am just not pasting it here to avoid clutter):
<body>
<div initToolbar>
<p>
Hover over me. Hover over me. Hover over me.
</p>
</div>
</body>
和
button.html
button.html
<div ng-controller="myController">
<button ng-click="someFunction()">Click me</button>
</div>
正如你可以在指令code看到的。 button.html装入提示，然而，这prevents无法正常工作properly--的NG-点击时button.html装入弹出不起作用角。这是因为角度不知道这件事。
As you can see in the directive code. button.html is loaded into the tooltip, however this prevents angular from functioning properly-- The ng-click does not work when button.html is loaded into the popup. That is because angular does not know about it.
我也知道，button.html是有效的，因为简单地添加
I also know that button.html is valid because simply adding
<ng-include src="'button.html'">
要index.html的正常工作（即点击按钮，执行someFunction（））
to index.html works fine (i.e clicking on the button executes someFunction())
所以我的问题是：
我如何绑定角度工具提示的实际内容？如果没有内容，是否有工具提示这样的角度知道其绑定的方法吗？
我所熟悉的$范围。$适用（），但我不太知道如何在这里使用它。
How can I bind the actual content of the tooltip with angular? If not the content, is there a way to bind the tooltip so angular knows about it? I am familiar with $scope.$apply() but I am not quite sure how to use it here.
推荐答案
更新1
确保在角从HTML去的JavaScript时，从蛇的情况下进入驼峰。因此，的init-工具栏上的HTML 转化为 initToolbar 在JavaScript。
UPDATE 1
Make sure to go from snake-case to camelCase when going from HTML to javascript in angular. So init-toolbar in html translates to initToolbar in javascript.
下面是一个工作示例： http://plnkr.co/edit/l2AJmU?p=$p $ PVIEW
Here is a working sample: 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
Button.html
<div>
<button ng-click="someFunction()">Click me</button>
</div>
JAVACRIPT
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
}
});
});
}
}
});
原始
按钮不起作用的原因是因为角度不知道它应该绑定到它。你告诉角度做使用 $编译。我不知道很多关于qTip2撑着，但如果您加载的模板，然后编译 $编译（模板）（范围）; 然后把它交给qTip2，你会得到你所期望的结果。
The reason the button does not work is because angular does not know it should bind to it. You tell angular to do that using $compile. I don't know much about that qTip2 pluggin, but if you load the template, then compile it $compile(template)(scope); then hand it over to qTip2, you will get the results you expect.
这篇关于AngularJS结合的jQuery插件qTip2的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
