[英]ng-click not working in dynamic html of a directive
我的问题似乎与ng-click不适用于动态创建的内容,但在那里发布的解决方案不适用于我。
整个目标是要有一个指令,该指令将根据控制器范围内的变量生成一些html。 生成的html将用可单击的跨度替换所有$ {foobar},其文本为foobar,单击该跨度将在控制器的作用域上执行一个功能。
我有一条指令:
.directive('markup', function($compile) {
var convertParameters = function(text) {
var matches = text.match(/\${.*}/);
if(!matches) {
return text;
}
for(var i=0;i<matches.length;++i) {
var match = matches[i];
var label = match.substring(2,match.length-1)
text = text.split(match).join('<span ng-click="expose(\'' + label + '\')">' + label + '</span>');
}
return text;
}
var link = function(scope, element, attrs) {
var text;
if (scope.markup) {
text = scope.markup;
} else {
text = element.text();
}
element.html("");
element.append($compile(convertParameters(text))(scope));
};
return {
restrict: 'A',
scope: {
markup: '=',
expose: '&'
},
replace: true,
link: link
};
});
该指令在html中用作:
<div class="full-text" markup="fullText" expose="exposeDoc"></div>
fullText =“这是初始测试。我们在这里有一个链接:$ {TestDocument}。”
在控制器的作用域上将ExposureDoc定义为:
$scope.exposeDoc = function(name) {
$log.error(name);
};
一切都正确呈现,但是当我喜欢TestDocument文本时,什么也没发生。 即使我希望记录该错误,也不会发生任何错误。 检查元素将显示ng-click属性。
这是一个显示问题的插件: http ://plnkr.co/edit/UFjM8evq43pdm69shQWn?p=preview
可以提供的任何帮助将不胜感激!
尤里卡! 我知道了我的问题。 问题不在于ng-click不起作用,但未按角度要求提供功能。
使用指令时,我需要指定如下函数:
<div class="full-text" markup="fullText" expose="exposeDoc(doc)"></div>
在doc只是一个占位符的情况下,当从指令中调用该函数时,我需要使用一个占位符值为参数的对象来调用它。 像这样:
'<span ng-click="expose({doc:\'' + label + '\'})">' + label + '</span>'
这是它起作用的一个小窍门。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.