我想在我无法控制 RTE 元素的 RTE 组件中附加一个 ng-click答案

【问题标题】：I wanted to append an ng-click in an RTE component for which i have no control on RTE element我想在我无法控制 RTE 元素的 RTE 组件中附加一个 ng-click
【发布时间】：2019-03-20 07:14:48
【问题描述】：

在我的 AEM 组件中，有一个 rte 元素。所有标记都是动态生成的，我想附加一个 ng-click 来调用一个函数。这是添加 RTE${properties.text @context='html'} 的代码这只是给了我一个我用作选择器的类。我现有的代码如下：

var sdshopNowLink = angular.element('.sdshopNowLink');
sdshopNowLink.on('click', function(){
    $scope.submitshopeCatalog();
});

我首先使用的是 javascript 选择器，但这不是第一次。使用 $compile 在本地工作，但在缩小后不工作。

var sdshopNowLink = angular.element('.sdshopNowLink'); 
sdshopNowLink.attr("ng-click", "submitshopeCatalog()");
compile(sdshopNowLink);

function compile(element){
    var el = angular.element(element);    
    $scope = el.scope();
    $injector = el.injector();
    $injector.invoke(function($compile){
        $compile(el)($scope)
    });     
}

以上也有一些性能问题。有没有其他方法可以附加 ng-click 并调用该函数。

【问题讨论】：

您可以将事件处理程序附加到您可以控制的父元素，并将该处理程序委托给动态元素
Call angularjs function using jquery/javascript的可能重复
@ClydeFrog 非常相似，但您的解决方案不会附加 ng-click，因为我希望仅在点击时调用该函数。
是的，类似。不过，您可以在给出的示例中使用相同的功能来满足您的需求。

标签： javascript angularjs aem rte

【解决方案1】：

就像我在 cmets 中所说的 the answer in the duplicate question。您可以使用它来满足您的需求。像这样：

HTML

<div id="YourElementId" ng-app='MyModule' ng-controller="MyController">
    Hi
</div>

JS 代码

angular.module('MyModule', [])
    .controller('MyController', function ($scope) {
    $scope.myfunction = function (data) {
        alert("---" + data);

        // Do something more...
    };
});

// I changed the code here so when element with ID "YourElementId" 
// gets clicked, it executes the anonymous function that calls "myFunction" 
// in the controller "MyController"
window.onload = function () {
    angular.element(document.getElementById('YourElementId')).on('click', function (event) {
        angular.element(event.target).scope().myfunction('test');
    });
}

【讨论】：