javascript - 动态 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 元素连接到范围。