AngularJS 绑定 jQuery qTip2 插件 [英] AngularJS binding jQuery qTip2 plugin
问题描述
我想弄清楚如何将工具提示的内容与 angular 绑定.我有一个如下所示的指令:
script.js
var myApp = angular.module('myApp', []);myApp.directive('initToolbar', function(){返回 {限制:'A'，链接:函数(范围、元素、属性){$(元素).qtip({内容: {阿贾克斯:{网址:'button.html'}},位置: {我的:左下角"，在:'底部中间'，目标:$(元素)},隐藏: {固定:真实，延迟:1000}});}}});它使用了 qTip2 插件来自这里
我的 index.html 看起来像这样(请注意，在实际文件中，我已将所有源文件都包含在 head 中，我只是不将其粘贴到此处以避免混乱):
<div initToolbar><p>悬停在我身上.悬停在我身上.悬停在我身上.</p>和
button.html
<button ng-click="someFunction()">点击我</button>正如您在指令代码中所见.button.html 被加载到工具提示中，但是这会阻止 angular 正常运行——当 button.html 被加载到弹出窗口时，ng-click 不起作用.那是因为 angular 不知道它.
我也知道 button.html 是有效的，因为只需添加
到 index.html 工作正常(即点击按钮执行 someFunction())
所以我的问题是:
如何将工具提示的实际内容与 angular 绑定?如果不是内容，有没有办法绑定工具提示，以便 angular 知道它?我熟悉 $scope.$apply() 但我不太确定如何在这里使用它.
UPDATE 1在 angular 中从 HTML 转换为 javascript 时，请确保从蛇型转换为驼峰型.所以 init-toolbar 在 html 中转换为 initToolbar 在 javascript 中.
这是一个工作示例:http://plnkr.co/edit/l2AJmU?p=preview
HTML
<p>悬停在我身上.悬停在我身上.悬停在我身上.</p>Button.html
<button ng-click="someFunction()">点击我</button>JAVACRIPT
var app = angular.module('plunker', []);app.controller('MainCtrl', function($scope) {$scope.name = '世界';$scope.someFunction = function() {$scope.name = 'FOO BAR';};});app.directive('initToolbar', function($http, $compile, $templateCache){返回 {限制:'A'，链接:函数(范围、元素、属性){$http.get('button.html', {cache: $templateCache}).成功(功能(内容){varcompiledContent = $compile(content)(scope);$(元素).qtip({内容:已编译的内容，位置: {我的:左下角"，在:'底部中间'，目标:$(元素)},隐藏: {固定:真实，延迟:1000}});});}}});原创
按钮不起作用的原因是因为 angular 不知道它应该绑定到它.您可以使用 $compile 告诉 angular 这样做.我对那个qTip2插件不太了解，但是如果你加载模板，然后编译它$compile(template)(scope);然后把它交给qTip2，你会得到你想要的结果期待.
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
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
}
});
}
}
});
It uses the qTip2 plugin from here
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>
and
button.html
<div ng-controller="myController">
<button ng-click="someFunction()">Click me</button>
</div>
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.
I also know that button.html is valid because simply adding
<ng-include src="'button.html'">
to index.html works fine (i.e clicking on the button executes someFunction())
So my question is:
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.
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.
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
<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
}
});
});
}
}
});
ORIGINAL
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屋！
