AngularJS：将范围绑定到 REST 检索的 iframe

Question

我有一个表格可以修改我的范围。然后使用此范围更新我网站中的另一部分。那部分，我现在想放入一个单独的（模板）文件并动态加载到 iframe 中。

如果我向 Iframe 提供静态 HTML，Iframe 可以正常工作，但我无法通过将另一个文件作为模板加载到运行。

这是我当前的代码：

cvFormApp.directive('cvframe', function($compile, $http, appConfig) {
  $http({
    url: appConfig.baseUrl + 'res/templates/classic.html',
    method: 'GET'
  }).then(function(response) {
    tpl = response.data;
  });

  return function($scope, $element, tpl) {

    var $body = angular.element($element[0].contentDocument.body),
      template = $compile('<h1>The date in the iframe is {{date}}</h1>')($scope);
    $body.append(template);
  };
});

如何将引用的 classic.html 插入 iframe 并绑定到我的其余代码？

Answer 1

我不确定你想要什么。我认为您在使用 $http 调用异步加载模板时弄乱了异步响应。您应该从 $http 成功中包含追加该模板。

指令

cvFormApp.directive('cvframe', function($compile, $http, appConfig) {
    return function($scope, $element, tpl) {
      $http({
        url: appConfig.baseUrl + 'res/templates/classic.html',
        method: 'GET'
      }).then(function(response) {
        var $body = angular.element($element[0].contentDocument.body), 
                    template = response.data;
        $body.append($compile(template)(scope)); //appended compiled element to DOM
      });
    };
});

AngularJS：将范围绑定到 REST 检索的 iframe

AngularJS: Bind scope to REST retrieved iframe

iframe

asynchronous

angularjs

angularjs-directive

angular-http