angularjs-directive - AngularJS绑定 jQuery qTip2插件

  显示原文与译文双语对照的内容

我想知道如何将工具提示的内容与 Angular 绑定起来。 我有一个看起来像 LIKE的指令:

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 在这个( 请注意,在实际的文件中我已经包含了所有的来源,我只是不粘贴在这里,以避免混乱。) 中看起来像 LIKE:


<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 被加载到工具提示中,但是这防止 Angular 在加载 button.html 时将ng-click工作在properly--中。 那是因为 Angular 不了解它。

我也知道 button.html 是有效的,因为仅仅添加了


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

to index.html 工作正常( 例如 单击按钮执行 someFunction() )

所以我的问题是:

如何将工具提示的实际内容与 Angular 绑定? 如果不是内容,是否有办法绑定工具提示以便 Angular 知道它? 我熟悉 $scope.$apply(),但我不太清楚如何在这里使用它。

时间: 原作者:

更新 1 确保在从 go 到 Angular 中的javascript时从snake-case到 camelCase 。 所以html中的init-toolbar 转换为javascript中的initToolbar

下面是一个工作示例: 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 pluggin不太了解,但是如果你加载模板,然后将它编译为 $compile(template)(scope);,然后将它交给 qTip2,你将得到预期的结果。

原作者:
...