角JS -评估定时

Question

我在angularjs中有以下问题。我想使用一个UI libary，它本身注入了一些html代码(Metro )，而且我在正确执行顺序方面遇到了困难。

一个简单的例子：http://metroui.org.ua/hint.html

如果我在html中声明：

<span data-hint="My hint"></span>

UIjs将创建提示显示所需的html元素。必须添加Nofurther脚本代码。实际上，当您加载js时，将执行以下代码：$(‘数据提示’).hint()；

由于在加载javascript时不存在角创建的html，所以它一开始根本不工作。

我相信我需要一个角指令来解决这个问题(在某些部分是这样的)--我创建了fowlling指令：

app.directive('hints', function() {
return {
    link: function() {$('[data-hint]').hint()}
};
});

即使这是用角创建的html，以下内容也是有效的：

<span hints data-hint="the text for my hint">test</span>

以下内容不起作用(至少它的行为不像我所希望的那样)：

<span hints data-hint="{{something}}">Test</span>

提示文本将按字面显示{某某}，而不是显示角表达式后面的任何内容。我已经尝试创建了类似的模板，但是结果仍然是一样的：

app.directive('hints', function() {
return {
    template: '<span data-hint="{{something}}">Test</span>',
    link: function() {$('[data-hint]').hint()}
};
});

任何关于如何解决这个问题的提示都将不胜感激。

Answer 1

主要的问题似乎是，如果将hint()附加到链接函数中，jquery在角计算它之前就采用了旧的值。一种选择是将$timeout(function(){..})封装在element.hint()上，但是我已经使用了太多的黑客，它并没有解决另一个问题:提示需要在$scope更改时更新(如果它依赖于$scope)。为了解决这个问题，我们可以添加一个$watch函数，并在需要时更新提示值。

因此，结论是：

/* This directive triggers automatically on data-hint as well */
app.directive('hint', function($timeout) {
    return {
        link: function(scope, element, arguments) {

            /* set the value of the hint, then attach the metro-hint widget */
            element.data('hint' , arguments.hint).hint();

            /* watch for changes in the value so the hint gets updated */
            scope.$watch(function(){
                return arguments.hint; 
            }, function() {
                element.data('hint' , arguments.hint);
            });
        }
    };
});

(用jquery 1.10.2、jquery 1.10.3和角1.2.6测试)