Web2py angularjs模块

时间:2015-11-11 06:36:43

标签: web2py

我有一个问题,就是试图让AngularJS模块在web2py中运行。

特别是这个购物车:http://ngcart.snapjay.com/docs

我在网上看到你必须更改AngularJS中的分隔符。 (我使用了更改Angular文件本身,但无法让appname.config正常工作。)

当我尝试在网站上复制演示时,似乎没有激活ngCart.js。只是简单的测试显示为。

有谁能告诉我出了什么问题?

这是我的尝试:

    {{extend 'layout.html'}}
        <head>

<script src="{{=URL('static','js/ngCart.min.js')}}"></script>
<script >//<![CDATA[

var myApp = angular.module('myApp',['ngCart']);



myApp.controller ('myCtrl', ['$scope', '$http', 'ngCart', function($scope, $http, ngCart) {
    ngCart.setTaxRate(7.5);
    ngCart.setShipping(2.99);

}]);


</script>


</head>

<body ng-app="myApp">
<div ng-controller='myCtrl'>

<div class="row">

    <div class="col-xs-offset-8 col-xs-4">
    <h3>Summary <span>(ngCart-summary)</span></h3>

      <ngcart-summary></ngcart-summary>
    </div>
    </div>
    <hr />
         <h3>Add to Cart <span>(ngCart-addtocart)</span></h3>
<div class="row">
    <div class="col-xs-6 col-sm-3">
        <h4>My Item #1</h4>
        <p> $10.99</p>
        <ngcart-addtocart id="item1" name="My Item #1" price="10.99" quantity="1" quantity-max="5">Add to Cart</ngcart-addtocart>
    </div>
    <div class="col-xs-6 col-sm-3">
        <h4>My Item #2</h4>
        <p> $15.29</p>
        <ngCart-addtocart id="item2" name="My Item #2" price="15.29" quantity="1" quantity-max="5">Add to Cart</ngCart-addtocart>
    </div>
    <div class="col-xs-6 col-sm-3">
        <h4>My Item #3</h4>
        <p> $25.75</p>
        <ngCart-addtocart id="item3" name="My Item #3" price="25.75" quantity="3" quantity-max="10">Add to Cart</ngCart-addtocart>
    </div>
    <div class="col-xs-6 col-sm-3">
        <h4>My Item #4</h4>
        <p> $29.25</p>
        <ngCart-addtocart id="item4" name="My Item #4" price="29.25" quantity="1" quantity-max="10">Add to Cart</ngCart-addtocart>
    </div>
</div>

    <hr/>
    <h3>Cart <span> (ngCart-cart)</span></h3>

    <ngCart-cart></ngCart-cart>

    <hr/>

<div class="row">
    <div class="col-md-12">

    <h3>Checkout <span> (ngCart-checkout)</span></h3>


        <div class="row">
    <div class="col-xs-4">
        <h4>service 'log'</h4>
        <ngCart-checkout service="log">Checkout</ngCart-checkout>
    </div>
    <div class="col-xs-4">
        <h4>service 'http'</h4>
        <ngCart-checkout service="http" settings="httpSettings">Checkout </ngCart-checkout>
    </div>
    <div class="col-xs-4">
        <h4>service 'paypal'</h4>
        <ngCart-checkout service="paypal" settings="payPalSettings"></ngCart-checkout>
    </div>
</div>



    </div>
</div>

</div>


<!--  TEMPALATES -->
<!--  TEMPALATES -->
<!--  TEMPALATES -->

<script type="text/ng-template" id="template/ngCart/summary.html">
    <div class="row">

    <div class="col-md-6">[[ ngCart.getTotalItems() ]]
        <ng-pluralize count="ngCart.getTotalItems()" when="{1: 'item', 'other':'items'}"></ng-pluralize>
        <br />[[ ngCart.totalCost() | currency ]]
    </div>
</div>
</script>


<script type="text/ng-template" id="template/ngCart/cart.html">
<div class="alert alert-warning" role="alert" ng-show="ngCart.getTotalItems() === 0">
    Your cart is empty
</div>

<div class="table-responsive col-lg-12" ng-show="ngCart.getTotalItems() > 0">

    <table class="table table-striped ngCart cart">

        <thead>
        <tr>
            <th></th>
            <th></th>
            <th>Quantity</th>
            <th>Amount</th>
            <th>Total</th>
        </tr>
        </thead>
        <tfoot>
        <tr ng-show="ngCart.getTax()">
            <td></td>
            <td></td>
            <td></td>
            <td>Tax ([[ ngCart.getTaxRate() ]]%):</td>
            <td>[[ ngCart.getTax() | currency ]]</td>
        </tr>
        <tr ng-show="ngCart.getShipping()">
            <td></td>
            <td></td>
            <td></td>
            <td>Shipping:</td>
            <td>[[ ngCart.getShipping() | currency ]]</td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td>Total:</td>
            <td>[[ ngCart.totalCost() | currency ]]</td>
        </tr>
        </tfoot>
        <tbody>
        <tr ng-repeat="item in ngCart.getCart().items track by $index">
            <td><span ng-click="ngCart.removeItemById(item.getId())" class="glyphicon glyphicon-remove"></span></td>

            <td>[[ item.getName() ]]</td>
            <td><span class="glyphicon glyphicon-minus" ng-class="{'disabled':item.getQuantity()==1}"
                      ng-click="item.setQuantity(-1, true)"></span>&nbsp;&nbsp;
                [[ item.getQuantity() | number ]]&nbsp;&nbsp;
                <span class="glyphicon glyphicon-plus" ng-click="item.setQuantity(1, true)"></span></td>
            <td>[[ item.getPrice() | currency]]</td>
            <td>[[ item.getTotal() | currency ]]</td>
        </tr>
        </tbody>
    </table>
</div>

</script>

<script type="text/ng-template" id="template/ngCart/addtocart.html">
    <div ng-hide="attrs.id">
    <a class="btn btn-lg btn-primary" ng-disabled="true" ng-transclude></a>

</div>
<div ng-show="attrs.id">
    <div>
        <span ng-show="quantityMax">
            <select name="quantity" id="quantity" ng-model="q"
                    ng-options=" v for v in qtyOpt"></select>
        </span>
        <a class="btn btn-sm btn-primary"
           ng-click="ngCart.addItem(id, name, price, q, data)"
           ng-transclude></a>
    </div>
    <mark  ng-show="inCart()">
        This item is in your cart. <a ng-click="ngCart.removeItemById(id)" style="cursor: pointer;">Remove</a>
    </mark>
</div>
</script>

<script type="text/ng-template" id="template/ngCart/checkout.html">

<div ng-if="service=='http' || service == 'log'">
    <button class="btn btn-primary" ng-click="checkout()" ng-disabled="!ngCart.getTotalItems()" ng-transclude>Checkout</button>
</div>


<div ng-if="service=='paypal'">

    <form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top" ng-show="ngCart.getTotalItems()">
        <input type="hidden" name="cmd" value="_xclick">
        <input type="hidden" name="business" value="[[ settings.paypal.business ]]">
        <input type="hidden" name="lc" value="CA">
        <input type="hidden" name="item_name" value="[[ settings.paypal.item_name ]]">
        <input type="hidden" name="item_number" value="[[ settings.paypal.item_number ]]">
        <input type="hidden" name="amount" value="[[ ngCart.getSubTotal()]]">
        <input type="hidden" name="currency_code" value="[[ settings.paypal.currency_code ]]">
        <input type="hidden" name="button_subtype" value="services">
        <input type="hidden" name="no_note" value="0">
        <input type="hidden" name="tax_rate" value="[[ ngCart.getTaxRate()]]">
        <input type="hidden" name="shipping" value="[[ ngCart.getShipping()]]">
        <input type="hidden" name="bn" value="PP-BuyNowBF:btn_buynowCC_LG.gif:NonHostedGuest">
        <input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_buynowCC_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
        <img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
    </form>

</div>

</script>


</body>

1 个答案:

答案 0 :(得分:1)

我不确定这是否是唯一的问题,但布局很可能已经有<head><body>标签(否则将无法使用)。创建扩展布局的视图时,视图中的所有内容都将放置在布局正文中{{include}}指令的位置。因此,最终呈现的HTML将在布局的<head>标记内添加其他<body><body>个标记。

相反,请假设它已在<body>标记内,编写您的视图。如果您确实需要在布局的<head>中插入内容,则可以使用block

有关详细信息,请参阅layout文档。