ng-click 在指令的动态 html 中不起作用答案

【问题标题】：ng-click not working in dynamic html of a directiveng-click 在指令的动态 html 中不起作用
【发布时间】：2016-06-10 21:16:31
【问题描述】：

我的问题似乎与ng-click not working in dynamically created content 比较相似，但那里发布的解决方案对我不起作用。

整个目标是有一个指令，该指令将基于控制器范围内的变量生成一些 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}。"

exposeDoc 在控制器的作用域上定义为：

$scope.exposeDoc = function(name) {
    $log.error(name);
};

一切都正确呈现，但是当我喜欢 TestDocument 文本时，什么都没有发生。即使我希望记录的错误也不会发生。检查元素会显示 ng-click 属性。

这是一个显示问题的 plunker：http://plnkr.co/edit/UFjM8evq43pdm69shQWn?p=preview

任何可以提供的帮助将不胜感激！

【问题讨论】：

在将内容附加到元素后，您是否尝试过执行 $compile？ $编译（元素）
是的，我试过了，但不幸的是，当我这样做时，文本根本没有被渲染。

标签： javascript jquery html angularjs

【解决方案1】：

尤里卡！我想出了我的问题。问题不在于 ng-click 不起作用，而是未按角度要求提供该功能。

使用指令时，我需要像这样指定函数：

<div class="full-text" markup="fullText" expose="exposeDoc(doc)"></div>

doc 只是一个占位符，当从指令调用该函数时，我需要使用占位符的值为参数的对象调用它。像这样：

'<span ng-click="expose({doc:\'' + label + '\'})">' + label + '</span>'

这是它的一个功能。

http://plnkr.co/edit/1cbyXSCh5udHvc8l3qcs?p=preview

【讨论】：