动态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 。