如何在角度上添加動態元素（模板）

Question

模板使用角度動態添加內容和顏色，如下圖所示。使用預定義的模板動態創建來自後端值的DOM元素。在角JS使用

什麼元素？

1. 指令
2. 模板

如何使用jQuery用戶界面可排序的角度JS指令排序？

.directive('contentItem',function($compile){ 
    var imageTemplate = '<div class="mypanel mypanel-default portlet" ng-class="{fullscreen : fullscreen}" ng-show="close">'+ 
       '<div class="mypanel-heading">'+ 
        '<div class="mypanel-btn" >'+ 
         '<a href="" class="mypanel-fullscreen" tooltip="{{tooltipfullscreen}}" ng-click="toggleFullscreen()"><i class="{{fullscreenicon}}"></i></a>'+ 
         '<a href="" class="mypanel-minimize" ng-click="toggle()" tooltip="{{tooltipminimize}}"><i class="{{minimizeicon}}"></i></a>'+ 
         '<a href="" class="mypanel-close tooltips" data-toggle="tooltip" title="Close Panel" tooltip="Close" ng-click="toggleHide()"><i class="fa fa-times"></i></a>'+ 
        '</div>'+ 
        '<h5 class="mypanel-title">Optional Sizes</h5>'+ 
       '</div>'+ 
       '<div class="mypanel-body" ng-show="on">'+ 
        '<div id="area-chart" class="height300">'+ 
        '</div>'+ 
      '</div>'+ 
      '</div>'; 



var getTemplate = function(contentType) { 

     var template = ''; 

     switch(contentType) { 
      case 'image': 
       template = imageTemplate; 
       break; 
      case 'video': 
       template = imageTemplate; 
       break; 
      case 'notes': 
       template = imageTemplate; 
       break; 
     } 

     return template; 
    } 

    var linker = function(scope, element, attrs) { 
     scope.on = true; 
     scope.tooltipminimize = 'Minimize'; 
     scope.minimizeicon = 'fa fa-minus'; 
     scope.fullscreenicon = 'fa fa-expand'; 
     scope.tooltipfullscreen = 'Fullscreen'; 
     scope.fullscreen = false; 
     scope.close = true; 
     scope.toggle = function() { 
       scope.on = !scope.on; 
       if(scope.tooltipminimize == 'Minimize'){ 
        scope.minimizeicon = 'fa fa-plus'; 
        scope.tooltipminimize = 'Maximize'; 
       } 
       else{ 
        scope.tooltipminimize = 'Minimize'; 
        scope.minimizeicon = 'fa fa-minus'; 
       } 
     }; 
     scope.toggleHide = function() { 
       scope.close = !scope.close; 
     }; 
     scope.toggleFullscreen = function(){ 
      scope.fullscreen = !scope.fullscreen; 
      if(scope.tooltipfullscreen == 'Fullscreen'){ 
        scope.fullscreenicon = 'fa fa-compress'; 
        scope.tooltipfullscreen = 'Exit Fullscreen'; 
       } 
       else{ 
        scope.fullscreenicon = 'fa fa-expand'; 
        scope.tooltipfullscreen = 'Fullscreen'; 
       } 
     }; 
     scope.sortableOptions = { 
     connectWith: '.sortable', 
     item: '.portlet', 
     placeholder: 'placeholder', 
     dropOnEmpty: true 
     }; 
     scope.rootDirectory = 'images/'; 
     element.html(getTemplate('image')).show(); 
     $compile(element.contents())(scope); 
    } 
    return{ 
     restrict: "E", 
     link: linker, 
     scope:true 
    }; 
}); 

Answer 1

這絕對是一個指令的情況下。傳入你的參數，並使用鏈接函數基本上從字符串建立模板。在下面的例子中，我正在參數中爲表單建立輸入。

.directive('qrunChild', ['$compile', function ($compile) { 
    return { 
     restrict: 'AE', 
     require: 'ngModel', 
     scope: { 
      ngModel: '=', 
     }, 
     link: function (scope, element, iAttrs, ngModelController) { 

      var tpl = ''; 
      var bpstart = '<div class="row no-margin">'; 
      var bp = '&nbsp;&nbsp;<span class="pull-left"><i class="fa fa-circle text-xs text-info-lt m-r-xs pull-left"></i>{{ngModel.name}}</span><span class="badge pull-right">{{ngModel.type}}</span>'; 
      var bpend = '</div class="row">'; 
      if (scope.ngModel.type == 'text') { 
       //tpl = '<input type="text" ng-model="ngModel.type">'; 
      } 
      else if (scope.ngModel.type == 'mc') { 
       tpl = '<div ng-repeat="opt in ngModel.options"><label class="ui-checks option"><input type="radio" ng-model="ngModel.optionsSelected" value="{{opt.name}}"><i style="margin-right:20px;"></i>{{opt.name}}</label></div>'; 
      } 

      view = $compile(bpstart + bp + tpl + bpend)(scope); 
      return $(element).html(view); 

     } 
    }; 
}]) 

我可以把這個作爲我的HTML如下：

編輯：如果你想提供一個網址給模板代替，你可以做這樣的事情（在這種情況下，它只是服用在父範圍中稱爲item.templateUrl的參數）：

.directive('dynamicTemplate', function() { 
    return { 
     template: '<ng-include src="getTemplateUrl()"/>', 
     scope: false, 
     transclude: true, 
     restrict: 'E', 
     controller: function ($scope) { 
      $scope.getTemplateUrl = function() { 
       //resolve the template 
       return $scope.item.templateUrl; 
      } 
     } 
    }; 
})