[英]ng-click not working in dynamic html of a directive
My problem seems relatively similar to ng-click not working in dynamically created content but the solution posted there is not working for me. 我的问题似乎与ng-click不适用于动态创建的内容,但在那里发布的解决方案不适用于我。
The entire goal is to have a directive that will generate some html based on a variable in the controller's scope. 整个目标是要有一个指令,该指令将根据控制器范围内的变量生成一些html。 The generated html will have replaced all ${foobar} with a clickable span whose text is foobar that will execute a function on the controller's scope when clicked.
生成的html将用可单击的跨度替换所有$ {foobar},其文本为foobar,单击该跨度将在控制器的作用域上执行一个功能。
I have a directive: 我有一条指令:
.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
};
});
The directive is used in the html as: 该指令在html中用作:
<div class="full-text" markup="fullText" expose="exposeDoc"></div>
fullText = "This is the initial test. We have a link here: ${TestDocument}." fullText =“这是初始测试。我们在这里有一个链接:$ {TestDocument}。”
exposeDoc is defined on the controller's scope as: 在控制器的作用域上将ExposureDoc定义为:
$scope.exposeDoc = function(name) {
$log.error(name);
};
Everything is rendered correctly but when I like on the TestDocument text nothing happens. 一切都正确呈现,但是当我喜欢TestDocument文本时,什么也没发生。 No errors occur even the one I expect to be logged.
即使我希望记录该错误,也不会发生任何错误。 Inspecting the element shows the ng-click attribute.
检查元素将显示ng-click属性。
Here is a plunker showing the issue: http://plnkr.co/edit/UFjM8evq43pdm69shQWn?p=preview 这是一个显示问题的插件: http ://plnkr.co/edit/UFjM8evq43pdm69shQWn?p=preview
Any help that can be provided would be greatly appreciated! 可以提供的任何帮助将不胜感激!
Eureka! 尤里卡! I figured out my issue.
我知道了我的问题。 The problem was not with ng-click not working but the function was not provided as angular requires.
问题不在于ng-click不起作用,但未按角度要求提供功能。
When using the directive I needed to specify the function like this: 使用指令时,我需要指定如下函数:
<div class="full-text" markup="fullText" expose="exposeDoc(doc)"></div>
Where doc is just a placeholder and when calling that function from the directive I need to call it with a object where the placeholder's value is the parameter. 在doc只是一个占位符的情况下,当从指令中调用该函数时,我需要使用一个占位符值为参数的对象来调用它。 Like this:
像这样:
'<span ng-click="expose({doc:\'' + label + '\'})">' + label + '</span>'
Here is a plunker of it functioning. 这是它起作用的一个小窍门。
http://plnkr.co/edit/1cbyXSCh5udHvc8l3qcs?p=preview http://plnkr.co/edit/1cbyXSCh5udHvc8l3qcs?p=preview
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.