Javascript AngularJS指令能否从动态内容中提取类名？

在上面的例子中，我希望具有

cls

类的元素以相同的行为从

ng repeat

（

ng bind html unsafe

）中提取，并显式设置一个

外部的

函数Ctrl（$scope）{
$scope.data=[
{alink:'一'}，
{alink:'Two'}
];
}
角度.模块（'appp'，[]）
.directive（'cls'，function（）{
返回{
限制：“C”，
替换：正确，
范围：正确，
链接：函数（范围、元素、属性）{
元素绑定（'单击'，函数（）{
警惕（“啊哈！”）；
});
}
}
});

---

我想知道我做错了什么？

问题是新的HTML不是由Angular编译的。最简单的解决方案可能是使用

$compile

服务手动编译动态内容。在自定义指令中执行此操作，并将

ng bind html unsafe=“r.alink”

替换为类似

htmlinsert=“r.alink”

的内容。以下是该指令的编码方式：

angular.module('appp', [])
.directive('htmlinsert',function($compile){
    return {
        scope: {
            htmlinsert: '='    
        },
        link: function(scope,element,attrs){
            var compiledElement = $compile(scope.htmlinsert)(scope);
            element.append(compiledElement); 
        }
    }
});

对html字符串的引用使用隔离作用域绑定传递，然后在附加到重复DOM元素的当前迭代之前进行编译

---

演示：

我有点怀疑它与Angular的编译函数有关，并且知道指令的编译不是link。但是没有意识到这必须在一个单独的指令中完成，：（感谢@shOber的帮助！

angular.module('appp', [])
.directive('htmlinsert',function($compile){
    return {
        scope: {
            htmlinsert: '='    
        },
        link: function(scope,element,attrs){
            var compiledElement = $compile(scope.htmlinsert)(scope);
            element.append(compiledElement); 
        }
    }
});