Question

我已经构建了一个Web应用程序，并且正在尝试将AngularJS Framework合并到我的代码中。我已经设置了我的程序，以便我有一个带有<input type="number"/>指令的ng-model="subtotal.subtotal1"和带有数据绑定元素的<td>元素，如下所示{{subtotal.subtotal1}}。
这个数据绑定表达式中的问题是，当窗口最初加载时，你可以在我的javascript文件返回实际值之前简单地看到未编译的数据（意思是我暂时看到大括号）
以下是我为解决问题而尝试的内容：
1.将angular.js CDN文件移动到正文部分的末尾和head部分。
2.更改了我包含的javascript文件的顺序 3.使用ng-cloak，它不能跨浏览器（IE：谷歌浏览器）工作，看起来好像页面有毛刺。我宁愿不使用指令来解决这个问题，如果我被迫这样做，那么我只需要使用类似这样的内容显示<td id="one">元素中的值：document.getElementById("one").innerHTML="content"。虽然我知道如果没有Angular.js我可以做到这一点，本练习的点是使用Angular

我已将代码包含在<head>部分和<body>部分中，这可能是问题（数据绑定，javascript文件的链接以及相应的javascript文件，包括角度码）

的头：

<html ng-app="myModule1">
<head>
    <meta charset="UTF-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>

    <link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
    <link rel="stylesheet" type="text/css" href="css/style.css"/>
    <link rel="stylesheet" type="text/css"  href="vex/dist/css/vex.css"/>
    <link rel="stylesheet" type="text/css" href="vex/dist/css/vex-theme-os.css"/> <br><br>

div tag：

（此标记包含在正文标记中，包含ng-controller，<input type="number" ng-model="subtotal.subtotal1"/>和相应的{ {1}}：

<td>{{1.99*subtotal.subtotal1}}</td>

尸体标记结束：

<div class="container" ng-controller="mycontroller1">
    <table class="table table-hover table-condensed">
                <form id="medication-product-1" method="POST">  
                        <tbody>
                            <tr>
                                <td data-th="Product">
                                    <div class="row">
                                        <div class="col-sm-2">
                                            <img id="small-pic2" src="images/benadryl.png"></img>
                                        </div>
                                        <div class="col-sm-10">
                                            <h4 class="nomargin"><input type="hidden" name="name1" value="Benadryl">
                                                Benadryl</input>    
                                            </h4>
                                            <p>
                                                A medication which reduces itching, sneezing, coughing through because of its properties as an anti-histamine.
                                            </p>
                                        </div>  
                                    </div>
                                </td>

                                <td data-th="Price"><input type="hidden" name="Price1" value=01.99> 
                                    $1.99</input>
                                </td>

                                <td data-th="Quantity">
                                    <input type="number" ng-model="subtotal.subtotal1" ng-init="subtotal.subtotal1=0" name="Quantity1" ng-change="changed()" id="amount1" class="form-control text-center" min="0"/>
                                </td>

                                <td data-th="Subtotal" id="subtotal-1" name="Subtotal"  class="text-center">{{1.99*subtotal.subtotal1}}</td>
                                <td>
                                    <input type="hidden" name="step" value="1"></input>
                                    <button type="button" id="button1" name="button-1" class="btn btn-primary">
                                         Add To Cart<span class="glyphicon glyphicon-shopping-cart"></span>
                                    </button>
                                </td>
                            </tr>
                    </form> 
                    <form id="medication-product-2" method="POST">
                            <tr>
                                <td data-th="Product">
                                    <div class="row">
                                        <div class="col-sm-2">
                                            <img src="images/motrin.jpg" id="small-pic"></img>
                                        </div>
                                        <div class="col-sm-10">
                                            <h4 >
                                            <input type="hidden" name="name2" value="Motrin"></input>
                                                Motrin 
                                            </h4>
                                            <p>
                                                Pain Reliever and Fever Reducer 
                                            </p>
                                        </div>  
                                    </div>
                                </td>

                                <td data-th="Price">
                                <input type="hidden" name="Price2" value="3.99">
                                    $3.99
                                </input>    
                                </td>

                                <td data-th="Quantity">
                                    <input type="number" ng-model="subtotal.subtotal2" ng-change="changed2()" ng-init="subtotal.subtotal2=0" name="Quantity2"
                                     id="amount2" min="0" class="form-control text-center"></input>
                                </td>

                                <td data-th="Subtotal" id="subtotal-2" 
                                name="Subtotal" class="text-center" >{{3.99*subtotal.subtotal2}}
                                </td>
                                <td>
                                <input type="hidden" name="step" value="2"></input>
                                    <button type="button2" id="button2" name="button-2"  class="btn btn-primary">
                                         Add To Cart<span class="glyphicon glyphicon-shopping-cart"></span>
                                    </button>
                                </td>
                            </tr>   
                        </tbody>
                    </form> 
                </table>
            </div>

medication.js：javascript文件的部分，其中包含角度代码。

<script  type="text/javascript" src="http://code.jquery.com/jquery-3.1.1.js"></script>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.js"></script> 
        <script type="text/javascript" src="js/medication.js"></script>
        <script type="text/javascript" src="vex/dist/js/vex.combined.js"></script>
        <script type="text/javascript" vex.defaultOptions.className = 'vex-theme-os'></script>
        <script type="text/javascript" src="js/bootstrap.js"></script>
        <script type="text/javascript" src="js/signout.js"></script>
    </body>

再次，我不知道为什么我能看到td元素中的花括号。

Answer 1

可以使用{{}}代替ng-cloak，但我发现编写<td>{{1.99*subtotal.subtotal1}}</td>更容易，只使用<td ng-bind="(1.99*subtotal.subtotal1)"></td>，因为它是为此目的而设计的。

只需在树中添加足够高的ng-cloak，这样就不必将其添加到很多元素中

更改

sudo ./install.sh

要

Installing OpenNI
****************************

copying shared libraries...cp: /usr/lib/libOpenNI.dylib: Operation not permitted
cp: /usr/lib/libOpenNI.jni.dylib: Operation not permitted
cp: /usr/lib/libnimCodecs.dylib: Operation not permitted
cp: /usr/lib/libnimMockNodes.dylib: Operation not permitted
cp: /usr/lib/libnimRecorder.dylib: Operation not permitted

如何在不使用ng-cloak的情况下阻止未编译的数据被查看？

1 个答案: