AngularJS - 動態添加指令而不使用角模板

我有一個要求，其中所有的html代碼來自服務器。和HTML代碼看起來象AngularJS - 動態添加指令而不使用角模板

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 所以我的問題是，爲什麼該指令不工作inspite之前編譯它的動態地將其添加爲

tgDynamic指令

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指令

<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"); 
        });

來源

2015-06-03 shanmukh

你在哪裏使用'tg-dynamic'？你的'longPress'代碼是什麼樣的？ – azium

@azium - 請仔細查看代碼。我已經添加了你問的代碼。 – shanmukh

template: '<div/>',

在指令中，模板參數是用來設置在模板被渲染。在您的代碼"<div/>"不是您的模板文件的位置。你應該遵循角度劃分將html代碼分割爲一個文件並將模板值設置爲文件的位置

來源

2015-06-03 13:11:58 wherby

AngularJS - 動態添加指令而不使用角模板

回答

相關問題