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

时间:2015-04-29 10:19:17

标签: angularjs compilation directive

如何编译外部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;
    });

1 个答案:

答案 0 :(得分:0)

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

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