Javascript 角度JS-评估时间

我在angularjs中有以下问题。我想使用一个UI库，它本身会注入一些html代码（Metro UI CSS），我很难获得正确的执行顺序

一个简单的例子：

如果我用html声明：

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

即使是在angular创建的html中，以下内容也可以使用：

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

测试

以下内容不起作用（至少它的行为方式与我不一样）：

测试

提示文本将按字面意思显示{{something}}，而不是角度表达式后面的内容。我已经尝试创建类似的模板，但结果仍然相同：

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

app.directive（'hints'，function（）{
返回{
模板：“测试”，
链接：函数（）{$（'[数据提示]）.hint（）}
};
});

---

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

主要的问题似乎是，如果在link函数中附加

hint（）

，jquery会在angular计算之前获取旧值。一个选项是围绕

元素.hint（）

包装

$timeout（function（）{..}）

，但是我已经使用了太多的hack，它并没有解决另一个问题：当

$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 ui 1.10.3和angular 1.2.6进行测试）

非常感谢-帮助我更好地理解angularjs。

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

/* 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);
            });
        }
    };
});