Question

我正在尝试创建一个角度应用程序，可以运输和引导，几乎没有指令。理想情况下，您将包含js文件：

<script src="myapp.js"></script>

然后在页面上放置一个div：

<div id="myDiv"></div>

启动应用程序，如：

angular.bootstrap(document.getElementById('myDiv'),['myApp']);

不用说，这不起作用。

请参阅this fiddle，了解它是否适用于ng- *指令和this one没有。

我想我的问题是 - 这甚至可能吗？

理想情况下，我想实现类似于Stripe的应用程序：

<script
  src="https://checkout.stripe.com/v2/checkout.js" class="stripe-button"
  data-key="pk_test_czwzkTp2tactuLOEOqbMTRzG"
  data-amount="2000"
  data-name="Demo Site"
  data-description="2 widgets ($20.00)"
  data-currency="usd"
  data-image="/128x128.png">
</script>

但无法找到让这个工作的方法。主要目标是不必公开角度细节以使用我的应用程序。

Answer 1

来自官方文档：

如果您需要更多地控制初始化过程，那么可以使用手动引导方法代替。在手动引导您的应用时，您应该不使用 ng-app 指令。

＆＃13;

<!doctype html>
<html>
<body>
  <div ng-controller="MyController">
    Hello {{greetMe}}!
  </div>
  <script src="http://code.angularjs.org/snapshot/angular.js"></script>

  <script>
    angular.module('myApp', [])
      .controller('MyController', ['$scope', function ($scope) {
        $scope.greetMe = 'World';
      }]);

    angular.element(document).ready(function() {
      angular.bootstrap(document, ['myApp']);
    });
  </script>
</body>
</html>

＆＃13;

Answer 2

你也可以使用jQuery“欺骗”这一点，然后在事实之后将ng-controller属性添加到div。

$(function() {
    $('#main_container').attr('ng-controller', 'InventoryController');
    $.when(angular.bootstrap(document.getElementById('main_container'), ["InventoryModule"])).done(function() {
        console.log("app bootstrapped");
    });
});

小提琴：http://jsfiddle.net/tj24K/

基本上，Angular通过向模板添加指令来工作。如果你想要完全干净的模板启动，你需要在jQuery中添加所有指令。对我而言，这似乎更值得工作。 Angular的整体美感正在消除jQuery选择器。

PS。，我还将你的控制器更改为只设置$ scope.items而不是返回它。

Answer 3

更新：错过了表示你想避免使用ng-controller的标题部分。

如果您需要添加在控制器中定义的行为，那么最简单的方法是使用ng-controller指令。您可以放弃我在下面写的内容，而不会在您的客户身上暴露任何角度细节。如果您绝对不使用ng-controller但仍然需要控制器行为，则可能需要深入了解Controller Factory代码，并了解如何创建并将范围附加到控制器方法。这似乎比它的价值更复杂。

原帖：

您正在引导应用，但您正在使用尚未添加到您正在创建的HTML元素中的控制器。

我假设您要注入一些HTML，因此您应该能够使用ng-controller装饰主DIV元素，然后再引导。我建议引导一个元素vs文档，以防有人将你的代码带入现有的基于angularjs的站点。

http://jsfiddle.net/detLd/1/

<div ng-controller="InventoryController">
    <ul ng-repeat='item in items'>
        <li>{{item.title}}</li>
        <li>{{item.price | currency}}</li>
    </ul>
</div>

您需要仔细阅读此页面上的评论http://docs.angularjs.org/api/angular.bootstrap

Answer 4

您可以在bootstraping应用程序之前将元素（指令）插入到文档中。

<html>
  <body>
    <script src="http://code.angularjs.org/snapshot/angular.js"></script>
    <script type="text/javascript" src="./app.js"></script>
  </body>
</html>

并在app.js

angular
  .element(document)
  .ready(function () {
     angular
      .module('myApp', [])
      .directive('myDirective', function () {
        return {
          template: '<div>my directive 2+2 = {{2+2}} </div>'
        };
      });
    var body = document.getElementsByTagName("body")[0];
    var appElement = document.createElement("my-directive");
    body.appendChild(appElement);
    angular.bootstrap(body, ['myApp']);
  });

https://jsfiddle.net/7dzo7q90/

angular.bootstrap（） - 引导角度应用程序，无需ng-app或ng-controller

4 个答案: