动态ng-click无法正常工作

Question

我有一个使用ngClick处理程序动态创建元素的指令，并将其附加到指令元素：

app.directive('truncate', ['$compile', function($compile) {
    return {
        restrict: 'A',
        scope: {
            textStr: '=',
            truncLength: '='
        },
        link: function(scope, element, attrs) {
            scope.open = false;

            scope.more = function() {
                console.log('hello');
            }

            scope.less = function() {
                var outputEle = angular.element('<span>' + scope.textStr.substring(0, scope.truncLength) + '<a data-ng-click="more()"> more...</a>' + '</span>');
                $compile(outputEle, scope);
                element.append(outputEle);
            }
            scope.less();
        }
    }
}]);

正在添加动态元素，但动态ngClick（在less函数内定义）不起作用。我做错了什么？

Answer 1

编译部分错误。它应该是

var outputEle = angular.element('<span>' + scope.textStr.substring(0, scope.truncLength) + '<a data-ng-click="more()"> more...</a>' + '</span>');
$compile(outputEle)(scope);
element.append(outputEle);

请注意，$compile(outputEle)会返回链接功能，您可以将其用于将DOM元素连接到scope。