gpt4 book ai didi

AngularJS 绑定(bind) jQuery qTip2 插件

转载 作者:行者123 更新时间:2023-12-04 01:57:00 25 4
gpt4 key购买 nike

我试图弄清楚如何将工具提示的内容与 Angular 绑定(bind)。我有一个看起来像这样的指令:

脚本.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>



按钮.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 绑定(bind)?如果不是内容,有没有办法绑定(bind)工具提示,让 Angular 知道它?
我熟悉 $scope.$apply() 但我不太确定如何在这里使用它。

最佳答案

更新 1
从 HTML 转换为 javascript 时,请确保从蛇形转换为驼峰转换。所以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>

按钮.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 不知道它应该绑定(bind)到它。你告诉 Angular 使用 $compile .我不太了解那个qTip2插件,但是如果你加载模板,然后编译它 $compile(template)(scope);然后交给qTip2,你会得到你期望的结果。

关于AngularJS 绑定(bind) jQuery qTip2 插件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17934315/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com