動態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 。