AngularJS - 动态添加指令

Question

在阅读@charlietfl提供的精彩帖子后，我正在重述我的问题。并试图尽可能删除jquery

有几个问题我无法摆脱。

1. 如何在Parse Cloud上使用角度模块。
2. 由于我不知道如何在Parse Cloud上使用Angular，我无法创建可以动态加载的模板。

所以，为了解决我的第二个问题，除了动态替换DOM之外别无选择（我知道这很糟糕）。还有另外一个要求，每个div，我想在用户长按div时弹出菜单。

为此，我创建了另一个指令long-press并将其与DOM一起传递。

这是从Parse Cloud Server

加载的

for (task in subTasks) {

    var subTaskObj = subTasks[task];
    var taskTitle = subTaskObj.title;
    var taskStatus = subTaskObj.status;
    // Here I'm passing long-press directive
    taskDOM += '<div class="oaerror danger" long-press>' +
        '<div class="col-xs-11"><strong>' + taskTitle + '</strong></div>' +
        '<div class="col-xs-1 pull-right"><img src="images/volunteer-task.png"></div>' +
        '<div class="clearfix"></div>' +
        '</div>';
}

tg-dynamic directive

angular.module('DWrapper.directives')
.directive('tgDynamic', function($compile, WidgetService) {
    return {
        restrict: 'E',
        scope: {
            groupWidget: '@'
        },
        template: '<div/>',
        replace: true,
        link: function(scope, ele, attr) {

            scope.$watch('groupWidget', function(newVal) {
                if (newVal) {
                    widgetService.getWidgetTemplate({"groupWidgetId": newVal })
                        .then(function(widgetResponse) {
                            var template = widgetResponse.data.result.template;
                            $(ele).html($compile(template)(scope));                                
                        });
                }
            });
        }
    };
});



在图像中，范围仅在根元素上可用，而不在long-press directive上。因此，如何注入范围，以使动态添加的long-press指令起作用。