javascript - 如何在 Angular 中生成独立的 HTML 页面

标签 javascript angularjs

我想生成一个完整的独立 HTML 页面。

到目前为止我已经尝试过:

$compile(
  angular.element('
    <html>
      <body>
        <div>{{stuff}}</div>
        <ul>
          <li data-ng-repeat="item in list">
            {{item}}
          </li>
        </ul>
      </body>
    </html>
  ')
)({
  stuff: 'Things',
  list: [
    'item1',
    'item2'
  ]
});

但这只会返回一个文本元素。

我已经成功地将 $interpolate 单独用于变量,但这不适用于 ng-repeat 和其他指令。

如何在前端生成完全编译的 HTML 页面?

如果您的问题是“您为什么要这样做?”,请考虑一个页面创建者界面,用户可以在其中输入一些变量并期望一个 HTML 页面作为响应。

最佳答案

我不确定我是否完全理解您的问题,但我已经创建了下面的代码段。这是你想要达到的目标吗?我对您的示例所做的重要更改是,我使用 $rootScope.$new() 创建了链接函数的作用域。仅使用普通的 javascript 对象是行不通的。

angular.module('test', [])
  .controller('test', function($rootScope, $rootElement, $compile) {
    var element = angular.element('<html><body><div>{{stuff}}</div><ul><li ng-repeat="item in list">{{item}}</li></ul></body></html>');
    var scope = $rootScope.$new();
    scope.stuff = 'Things';
    scope.list = [
      'item1',
      'item2'
    ];
    var result = $compile(element)(scope);
    $rootElement.append(result);
  });
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="test" ng-controller="test"></div>

关于javascript - 如何在 Angular 中生成独立的 HTML 页面,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46200275/

相关文章:

angularjs - 我怎样才能从 View 中隐藏 <div> 元素,但仍然让它们占用 AngularJS 的空间?

AngularJS SEO for 404 Status for Document Similar to This Website

javascript - Angular ui-router 解析 promise 提供无限摘要循环

javascript - 使用 AngularJS 在 Apache Zeppelin 中绘制多条线(折线图)

javascript - 将 AngularJs 1.x 项目从 Gulp/Grunt 迁移到 Webpack

javascript - 验证 html 颜色代码 JS

javascript - 如何以 Angular 方式访问URL中的查询参数(在哈希之外,非html 5模式)?

javascript - Kendo Grid 详细信息导致父网格刷新?

javascript - Bokeh 服务器获取鼠标位置

javascript - jQuery $.post() (AJAX) 导致内存泄漏