Question

我的问题似乎与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 =＆＃34;这是初始测试。我们在这里有一个链接：$ {TestDocument}。＆＃34;

exposeDoc在控制器的范围内定义为：

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

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

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

非常感谢能提供的任何帮助！

Answer 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

ng-click不能在指令的动态html中工作

1 个答案: