2

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

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

然后在页面上放一个div：

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

并引导应用程序，如：

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

不用说，这行不通。

请参阅this fiddle以查看它与 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>

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

4

4 回答 4

7

来自官方文档：

如果您需要对初始化过程进行更多控制，则可以改用手动引导方法。手动引导应用时不应使用ng-app指令。

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

于 2015-07-29T14:25:25.697 回答
1

您也可以在事后使用 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 而不是返回它。

于 2013-07-18T19:00:23.017 回答
0

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

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

原帖：

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

我假设你要注入一些 HTML，所以你应该能够用 ng-controller 装饰你的主要 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

于 2013-07-18T17:58:20.107 回答
0

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

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

于 2016-12-28T09:29:45.803 回答