编译指令中由 ajax 调用的外部 HTML

Question

如何编译外部 HTML 文件？

我正在根据指令中的浏览器请求通过 ajax 加载一个外部 HTML 文件，那么有什么方法可以编译该文件以便它可以在指令中使用吗？

    corpo.directive('corpInbox', function(companyFactory, $templateRequest, $compile) {
      var directive = {};

      directive.restrict = 'A';

      directive.scope = {
        model: '=mgModel'
      }

      directive.link = function($scope, element, attributes) {

        console.log("preparing the inbox........");

        var content = $('.inbox-content', element);
        var loading = $('.inbox-loading', element);
        var listListing = '';

        var loadInbox = function(el, name) {
          var url = 'templates/inbox/inbox_inbox.html';
          var title = $('.inbox-nav > li.' + name + ' a', element).attr('data-title');
          listListing = name;

          loading.show();
          content.html('');
          toggleButton(el);

          $.ajax({
            type: "GET",
            cache: false,
            url: url,
            dataType: "html",
            success: function(res) {
              toggleButton(el);

              $('.inbox-nav > li.active', element).removeClass('active');
              $('.inbox-nav > li.' + name, element).addClass('active');
              $('.inbox-header > h1', element).text(title);

              loading.hide();
              content.html(res);
              /*if (Layout.fixContentHeight) {
                        Layout.fixContentHeight();
                    }*/
              //Metronic.initUniform();
            },
            error: function(xhr, ajaxOptions, thrownError) {
              toggleButton(el);
            }
          });

          // handle group checkbox:
          jQuery('body').on('change', '.mail-group-checkbox', function() {
            var set = jQuery('.mail-checkbox', element);
            var checked = jQuery(this).is(":checked");
            jQuery(set).each(function() {
              $(this).attr("checked", checked);
            });
            //jQuery.uniform.update(set);
          });
        }
      }
      return directive;
    });

Answer 1

对于编译，您必须将 $compile 注入到您的指令中。然后在 ajax 调用的成功方法中使用以下代码来编译 res.

var compiledhtml = $compile($(res))($scope);
content.html(compiledhtml);

Answer 2

首先你应该使用 $http 而不是 $。ajax 对于编译，您必须将 $compile 注入到您的指令中。然后在 ajax 调用的成功方法中使用以下代码来编译 res.

var compiledhtml = $compile($(res))($scope);
content.html(compiledhtml);

编译指令中由 ajax 调用的外部 HTML

Compile external HTML which is called by ajax in directive

compilation

directive

angularjs