javascript - AngularJS - 不使用 Angular 模板动态添加指令

Question

我有一个要求，其中所有html代码都来自服务器。 html 代码如下所示

for (task in subTasks) {

    var subTaskObj = subTasks[task];
    var taskTitle = subTaskObj.title;
    var taskStatus = subTaskObj.status;

    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>';
}

taskDescriptionDOM = '<div class="error-notice" id=' + '"' + taskId + '"' + '>' +
    '<div class="oaerror danger">' +
    '<div class="col-xs-11"><strong>' + description + '</strong></div>' +
    '<div class="col-xs-1 pull-right"><img src="images/volunteer-task.png"></div>' +
    '<div class="clearfix"></div>' +
    '</div>' +
    '</div>' + taskDOM;
$("#widRes_01").html(taskDescriptionDOM);

如您所见，我还在 taskDOM 中添加了长按指令 所以我的问题是，为什么该指令在动态添加之前进行了编译但不起作用

tg动态指令

angular.module('Modern.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));
                    });
                }
            });
        }
    };
});

这就是我使用 tgDynamic Directive 的方式

 <tg-dynamic class="panel" id="widRes_01" group-widget={{displayedWidgetId}}></tg-dynamic>

长按指令

directive("longPress", function($compile, WidgetService) {
        return {
            scope: {},
            link: function(scope, ele, attr) {
                    var groupWidgetId = '',
                        isOpen = false;


                    $(ele).on('touchstart', function() {
                        var that = this,
                            dropDown = '<div id="widgetMenu"/>';

                        console.log("Touch Start");

                        setTimeout(function() {
                            groupWidgetId = $(ele).find('label#gmw_grpWidgetId').html();
                            var widgetType = $(ele).find('label#gmw_widgetType').html();
                            isOpen = widgetType === "OPEN" ? true : false;
                            if (isOpen) {
                                $(that).append(dropDown);
                                $("#widgetMenu").html($compile('<ul><li><a ng-click="updateIsMainStatus()">Mark as Main</a></li><li><a ng-click="closeWidget()">Close Widget</a></li></ul>')(scope));
                            }else
                                ShowDialogBox("INFO","Widget is closed.");
                        }, 1000);

                    });

                    $(ele).on('touchend', function() {
                        setTimeout(function() {
                            $("#widgetMenu").remove();
                        }, 2000);
                        console.log("Touch End");
                    });

Answer 1

template: '<div/>',

在指令中，模板参数用于设置模板的渲染位置。在你的代码中"<div/>"不是您的模板文件的位置。您应该遵循 Angular 约定将html代码拆分到文件中并将模板值设置为文件的位置