在postlink阶段，尝试在使用element.append(）创建的元素上使用ng-click

Trying to use ng-click on an element created with element.append() during the postlink phase?

本文关键字：创建 ng-click 元素 element 阶段 postlink append      更新时间：2023-09-26

我正在尝试修改这个角度库以添加新功能。https://github.com/southdesign/angular-coverflow/blob/master/coverflow.js在这样做的时候，我需要能够将点击事件附加到它正在创建的元素上。如果您查看第64-73行，您可以看到元素是如何添加到DOM的。在第72行向模板添加ng次单击没有任何效果。我猜这是因为angular已经开始了引导过程，并且忽略了这个新创建的ng点击。做这件事的正确方法是什么？我应该修改指令的模板，使用ng-rerepeat而不是普通的javascript，然后遍历并找到要添加样式的每个元素吗？或者有没有一种方法可以使用当前的方法附加角度事件？

下面是一个如何声明指令以及如何在链接（postlink）阶段初始化coverflow插件的示例。

function coverflowDirective () {
    return {
        restrict: 'E',
        replace: true,
        template: '<div class="coverflow-container"></div>',
        scope: { images: "=" },
        link: function (scope, element, attrs) {
            // initialize
            scope.coverflow = new Coverflow({
                height:  320,
                width:   568,
                element: element,
                scope:   scope,
                images:  scope.images
            }).init();
            // Setup touch listeners
            element.bind('touchstart',  scope.coverflow.touchStart.bind(scope.coverflow));
            element.bind('touchmove',   scope.coverflow.touchMove.bind(scope.coverflow));
            element.bind('touchend',    scope.coverflow.touchEnd.bind(scope.coverflow));
            // Setup mouse listeners
            element.bind('mousedown',  scope.coverflow.mouseDown.bind(scope.coverflow));
            element.bind('mousemove',  scope.coverflow.mouseMove.bind(scope.coverflow));
            element.bind('mouseup',    scope.coverflow.mouseUp.bind(scope.coverflow));
        },
        controller: function ($scope) {
            $scope.logIndex = function (index) {console.log(index);};
        }
    };
}

这是我第一次尝试在模板中添加ng点击。

Cover.prototype.template = function () {
    return '<div class="coverflow-cover" ng-click="console.log(1)" id="coverflow-cover-id-' + this.coverId + '"></div>';
};

我在这个问题中找到了答案AngularJS-将元素附加到指令中的每个ng重复迭代中。它涉及对链接函数中的元素再次手动调用compile。虽然它现在已经可以使用了，但我仍然不确定这是否是处理这个问题的最佳方式。所以我很乐意为您提供任何反馈。

function coverflowDirective ($compile) {
    return {
        restrict: 'E',
        replace: true,
        template: '<div class="coverflow-container">' +
                      '<div id="coverflow-scrollbar"><div id="coverflow-scrollbar-handle"></div></div>' +
                  '</div>',
        scope: { images: "=" },
        link: function (scope, element, attrs) {
            // initialize
            scope.coverflow = new Coverflow({
                height:  320,
                width:   800,
                element: element,
                scope:   scope,
                images:  scope.images
            }).init();
            // Setup touch listeners
            element.bind('touchstart',  scope.coverflow.touchStart.bind(scope.coverflow));
            element.bind('touchmove',   scope.coverflow.touchMove.bind(scope.coverflow));
            element.bind('touchend',    scope.coverflow.touchEnd.bind(scope.coverflow));
            // Setup mouse listeners
            element.bind('mousedown',  scope.coverflow.mouseDown.bind(scope.coverflow));
            element.bind('mousemove',  scope.coverflow.mouseMove.bind(scope.coverflow));
            element.bind('mouseup',    scope.coverflow.mouseUp.bind(scope.coverflow));
            // recompile after template generation
            $compile(element)(scope);
        },
        controller: function ($scope) {
            $scope.logIndex = function (index) {console.log('index');};
        }
    };
}
相关文章：