2

ディレクティブをほとんどまたはまったく使用せずに出荷およびブートストラップできる角度のあるアプリを作成しようとしています。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>

しかし、これを機能させる方法も見つかりませんでした。主な目標は、アプリを使用するために角度の詳細を公開する必要がないことです。

4

4 に答える 4

0

更新: ng-controller を避けたいというタイトルの部分を見逃していました。

コントローラーで定義された動作を追加する必要がある場合、最も簡単な方法は ng-controller ディレクティブを使用することです。クライアントの角度の詳細を公開することなく、以下に書いたことを回避できます。ng-controller を使用せずにコントローラの動作が必要な場合は、おそらくコントローラ ファクトリ コードに飛び込んで、スコープを作成してコントローラ メソッドにアタッチする方法を確認する必要があります。これは、その価値よりも複雑なようです。

元の投稿:

アプリをブートストラップしていますが、作成している HTML 要素に追加されていないコントローラーを使用しています。

HTML を挿入すると仮定しているので、メインの DIV 要素を ng-controller で装飾してから、ブートストラップする必要があります。誰かがあなたのコードを既存の angularjs ベースのサイトに持ち込んでいる場合に備えて、その 1 つの要素とドキュメントでブートストラップすることをお勧めします。

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 に答える