Создание директивы html

Question

Я создаю директиву, которая автоматически генерирует элементы HTML в соответствии с данными, полученными с сервера.

Вот angularjs код:

(function() { 
    "use strict"; 

    angular.module("workPlan").directive("myGenericFilter", ["$compile", "$http", "config", myGenericFilterData]); 

    function myGenericFilterData($compile, $http, config) { 
     var directive = { 
      restrict: "E", 
      scope: { 
       filterParams: "=filterparameters", 
      }, 

      //templateUrl: config.baseUrl + "app/workPlan/templates/workPlanList.tmpl.html", 
      template: '<div></div>', 
      controller: "genericFilterDataController", 
      controllerAs: "filter", 

      link: function (scope, element) { 
       var parameters; 

       var el = angular.element('<span/>'); 
       $http.post(config.baseUrl + "api/FilterConfigurations/", scope.filterParams).then(function (result) { 
        parameters = result.data; 
        angular.forEach(parameters, function (parameter, key) { 
         switch (parameter.ValueType) { 
          case 'Int32': 
           el.append('<div class="form-group">' + 
              '<div class="">' + 
               '<span class="view"></span>' + 
               '<input type="text"' + 'id =' + parameter.ObjectName + ' class="form-control">' + 
              '</div>' + 
              '</div>'); 
           break; 
          case 'DateTime': 
           el.append('<div class="form-group">' + 
               '<span class="view"></span>' + 
               '<my-datepicker placeholder="dd/mm/yyyy" class=""></my-datepicker>' + 
              '</div>'); 
           break; 
         } 
        }); 
       }); 
       $compile(el)(scope); 
       element.append(el); 
      } 
     } 
     return directive; 
    } 
})(); 

Как вы можете видеть, что я получить данные с сервера и в соответствии с parameter.ValueType соответствующего случая, выбранного в коммутаторе.

После оператора angular.forEach итерации по всем пунктам в переменной parameters и все элементах DOM загружен, все входные HTML элементы отображаются за исключением my-datepicker таможенной директивы. Когда я использую F12 в Элемент проверки Я вижу код HTML всех элементов (включая my-datepicker).

Вот как это выглядит:

Но с точки зрения my-datepicker не отображается, вот как это выглядит с точки зрения:

my-datepicker таможн директива, которая определена в общем модуль, который вводится во всех модулях в моем проекте.

Любая идея, почему my-datepicker не отображается в виде?

Answer 1

Вы компилируете el перед установкой el. Помните, что запрос $ НТТРА асинхронной затем положить

$compile(el)(scope); 
element.append(el); 

В обратном вызове

link: function (scope, element) { 
    var parameters; 

    var el = angular.element('<span/>'); 
    $http.post(config.baseUrl + "api/FilterConfigurations/", scope.filterParams).then(function (result) { 
     parameters = result.data; 
     angular.forEach(parameters, function (parameter, key) { 
      switch (parameter.ValueType) { 
       case 'Int32': 
        el.append('<div class="form-group">' + 
           '<div class="">' + 
            '<span class="view"></span>' + 
            '<input type="text"' + 'id =' + parameter.ObjectName + ' class="form-control">' + 
           '</div>' + 
           '</div>'); 
        break; 
       case 'DateTime': 
        el.append('<div class="form-group">' + 
            '<span class="view"></span>' + 
            '<my-datepicker placeholder="dd/mm/yyyy" class=""></my-datepicker>' + 
           '</div>'); 
        break; 
      } 
     }); 

     $compile(el)(scope); 
     element.append(el); 
    }); 
}