angular.bootstrap()-在不需要ng应用程序或ng控制器的情况下引导angular应用程序

我正在尝试创建一个有角度的应用程序，它可以在几乎没有指令的情况下交付和引导。理想情况下，您应该包括js文件：

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

然后在页面上放一个div：

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

并引导应用程序，如：

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

不用说，这是行不通的。

看看这个小提琴，看看它在有ng-*指令的情况下工作，而这个没有。

我想我的问题是——这可能吗？

理想情况下，我想实现类似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>

但也找不到让它发挥作用的方法。主要目标是使用我的应用程序时不必暴露角度细节。

来自官方文档：

如果您需要对初始化过程有更多的控制可以使用手动引导方法。当手动引导您的应用程序时，您不应该使用ng应用程序指令。

<!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>

您还可以使用jQuery在事后将ng控制器属性添加到div中，从而"欺骗"这一点。

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

Fiddle：http://jsfiddle.net/tj24K/

不过，从本质上讲，Angular是通过向模板添加指令来工作的。如果您想启动完全干净的模板，则需要在jQuery中添加所有指令。对我来说，这似乎比它的价值更多的工作。Angular的全部优点在于去掉了jQuery选择器。

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

更新：错过了标题中说要避免ng控制器的部分。

如果您需要添加在控制器中定义的行为，那么最简单的方法就是只使用ng控制器指令。你可以摆脱我在下面写的内容，而不会暴露出你客户的任何棱角分明的细节。如果你绝对不使用ng控制器，但仍然想要控制器行为，你可能需要深入研究控制器工厂代码，看看如何创建作用域并将其附加到控制器方法。这似乎比它的价值更复杂。

原始帖子：

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

我假设你要注入一些HTML，所以你应该能够用ng控制器装饰你的主DIV元素，然后引导。我建议在一个元素与文档之间进行引导，以防有人将您的代码带入现有的基于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

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

<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/

相关内容

最新更新

热门标签：