Nav*_*eed 11 angularjs qtip2 angularjs-directive angularjs-scope
我试图弄清楚如何用角度绑定工具提示的内容.我有一个看起来像这样的指令:
的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()但我不太清楚如何在这里使用它.
Jas*_*ore 15
更新1
当从HTML转换为javascript时,确保从snake-case转到camelCase.所以init-toolbar在html翻译为initToolbarjavascript.
以下是一个工作示例: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,你将得到你期望的结果.