識別基於Angularjs頁面困境的元素/頁面

對於基於Angularjs的網站，我有一個很好的sample page。我想製作自動填充器和自動刷新器。識別基於Angularjs頁面困境的元素/頁面

爲此我需要唯一標識頁面或子頁面（在阿賈克斯的情況下，基於變化）

可是一個大問題是，它幾乎不含CSS的ID和類，我可以使用參考DOM元素jQuery的ID和類選擇器。即使它包含一個css ID - 許多頁面都有相同的ID，所以我無法區分頁面或子頁面（如果由於此站點中的Ajax導致相同頁面發生更改）。

在這種情況下，我通常嘗試使用定位技術來搜索元素。例如，一個元素包含一個文本，它的父類有一些特殊性。

但這些網頁超出了這種技術。

什麼應該是我的策略來唯一標識此網站中的頁面和子頁面？

我從附加結帳頁面的代碼段：

<table width="100%" height="100%" cellspacing="0" cellpadding="0" class="product-table"> 
    <tbody> 
    <tr> 
     <td class="cell item-cell" data-aid="item-cell_LSTPWBEC88RWRGZZRYJHJGUYV:ACOU03K8GIICUWOQNH15QDXGQ175IW8V-58f78c75696a0:P:C-0012:U:SPCMS"><div class="line bmargin5 font-color-medium fk-font-11 ng-binding fk-uppercase" ng-class="product.is_digital ? 'digital-type': 'fk-uppercase'" ng-show="product.product_image_url"> <span class="power bank-icon ng-hide" ng-show="product.is_digital"></span>Power Bank</div> 
     <span class="title ng-binding">Intex IT-PB11K 11000 mAh Power Bank</span> <!-- ngIf: product.title_tag!='' --> 
     <p class="tmargin5 fk-font-11 font-color-medium ng-scope ng-binding" ng-if="product.title_tag!=''">White, Lithium-ion</p> 
     <!-- end ngIf: product.title_tag!='' --> <!-- ngIf: product.co_subtitle!='' --> 
     <p class="tmargin5 fk-font-11 font-color-medium ng-scope ng-binding" ng-if="product.co_subtitle!=''"></p> 
     <!-- end ngIf: product.co_subtitle!='' --> <span class="ff-icon tmargin5 ng-hide" ng-show="product.isFFOfferApplied" title="Flipkart First"></span> <!-- ngIf: product.title_product_offer!='' --> <!-- ngIf: product.extra_warning!='' && product.extra_warning!=null --> 
     <div class="tmargin10 ng-binding"> Seller: RetailNet <!-- ngIf: spTag == 'FBF' --> 
      <div ng-if="spTag == 'FBF'" class="fk-inline-block ng-scope">| <span class="fa-icon"><img class="f-assured" src="https://rukminim1.flixcart.com/www/308/84/promos/11/08/2016/fc906a53-e6b5-4793-bcb9-86f957421408.png?q=90"></span></div> 
      <!-- end ngIf: spTag == 'FBF' --> </div> 
     <!-- ngIf: product.emi_cashback_offer --> <!-- ngIf: product.debit_card_cashback_offer --> <!-- ngIf: product.credit_card_cashback_offer --> <!-- ngIf: product.isPrexoApplied --> 
     <div class="tmargin5 offer-applied" ng-show="product.promotion_detail.appliedPromotions"> <a class="fk-inline-block btn btn-white offer-ttp ng-binding" ng-mouseenter="showOffers=true" data-aid="OffersApplied_lnk"> <span class="offer-color fk-bold">OFFERS:</span> 2 applied </a> 
      <ul class="promo-info-div ng-hide" ng-show="showOffers" ng-mouseleave="showOffers=false" data-aid="AppliedOffersContainer"> 
      <!-- ngRepeat: promotion in product.promotion_detail.appliedPromotions --> 
      <li class="pure-g-r tmargin5 bmargin5 ng-scope" ng-repeat="promotion in product.promotion_detail.appliedPromotions"> 
       <div class="pure-u-4-5"> 
       <p class="promo-info fk-inline-block fk-font-small ng-binding" data-aid="AppliedOffer"> +&nbsp; Extra ₹50 off on Intex 11,000mAh Power Bank </p> 
       </div> 
       <div class="pure-u text_right fk-font-11 fk-bold ng-binding" ng-show="promotion.discountAmount>0" data-aid="OfferDiscounts">Rs.50</div> 
      </li> 
      <!-- end ngRepeat: promotion in product.promotion_detail.appliedPromotions --> 
      <li class="pure-g-r tmargin5 bmargin5 ng-scope" ng-repeat="promotion in product.promotion_detail.appliedPromotions"> 
       <div class="pure-u-4-5"> 
       <p class="promo-info fk-inline-block fk-font-small ng-binding" data-aid="AppliedOffer"> +&nbsp; Extra ₹130 Off on Intex Power Banks </p> 
       </div> 
       <div class="pure-u text_right fk-font-11 fk-bold ng-binding" ng-show="promotion.discountAmount>0" data-aid="OfferDiscounts">Rs.130</div> 
      </li> 
      <!-- end ngRepeat: promotion in product.promotion_detail.appliedPromotions --> 
      </ul> 
     </div> 
     <div class="conditional-offer tmargin10" ng-show="product.promotion_detail.conditionalPromotions"> <a class="conditional-offer-count ng-binding" ng-mouseenter="showEligibleOffers=true" ng-mouseleave="showEligibleOffers=false">You are eligible for 2<!-- ngIf: product.promotion_detail.totalPromotions > 0 --><span ng-if="product.promotion_detail.totalPromotions > 0" class="ng-scope"> more</span><!-- end ngIf: product.promotion_detail.totalPromotions > 0 --> offer<!-- ngIf: product.promotion_detail.totalConditionalPromotions > 1 --><span ng-if="product.promotion_detail.totalConditionalPromotions > 1" class="ng-scope">s</span><!-- end ngIf: product.promotion_detail.totalConditionalPromotions > 1 -->!</a> 
      <div class="offer-content ng-hide" ng-show="showEligibleOffers"> <span class="tooltip-arrow bottom"></span> 
      <ul class="offer-list"> 
       <!-- ngRepeat: promotion in product.promotion_detail.conditionalPromotions --> 
       <li class="line tmargin5 bmargin5 fk-font-small ng-scope ng-binding" ng-repeat="promotion in product.promotion_detail.conditionalPromotions"> Extra 5% off* on Axis Bank Buzz Credit Cards </li> 
       <!-- end ngRepeat: promotion in product.promotion_detail.conditionalPromotions --> 
       <li class="line tmargin5 bmargin5 fk-font-small ng-scope ng-binding" ng-repeat="promotion in product.promotion_detail.conditionalPromotions"> Extra 25% Wallet Cashback* on PhonePe payment </li> 
       <!-- end ngRepeat: promotion in product.promotion_detail.conditionalPromotions --> 
      </ul> 
      </div> 
     </div> 
     <!-- ngIf: product.promotion_detail.disbursalWarnings --> <!-- ngIf: product.forward_services!='' --></td> 
     <td class="cell fk-text-center qty-cell carty-changeQuantity"><form class="qtyForm ng-isolate-scope ng-pristine ng-valid" name="form_LSTPWBEC88RWRGZZRYJHJGUYV:ACOU03K8GIICUWOQNH15QDXGQ175IW8V-58f78c75696a0:P:C-0012:U:SPCMS" method="get" data-listing_id="LSTPWBEC88RWRGZZRYJHJGUYV:ACOU03K8GIICUWOQNH15QDXGQ175IW8V-58f78c75696a0:P:C-0012:U:SPCMS" ng-submit="onSubmit($event)" quantity="" model="product" on-quantity-change="updateQuantity(qty, id, title)"> 
      <input type="text" ng-focus="onFocus()" ng-blur="onSubmit($event)" maxlength="3" value="1" ng-disabled="disabled" ng-pattern="/^[1-9][0-9]*$/" ng-model="product.quantity" class="qty-box fk-input ng-scope ng-pristine ng-valid ng-valid-pattern" select-on="qty_LSTPWBEC88RWRGZZRYJHJGUYV:ACOU03K8GIICUWOQNH15QDXGQ175IW8V-58f78c75696a0:P:C-0012:U:SPCMS" tooltip-placement="right" tooltip="Please enter units: 1 or more" tooltip-trigger="focus"> 
      <!-- ngIf: product.isQtyRestrictedMessage --><br> 
      <input type="submit" class="qty-save fk-font-small ng-hide" value="Save" ng-show="showSave" bind-log="quantity update LSTPWBEC88RWRGZZRYJHJGUYV:ACOU03K8GIICUWOQNH15QDXGQ175IW8V-58f78c75696a0:P:C-0012:U:SPCMS"> 
     </form></td> 
     <td class="cell price-cell"><div class="carty-price text_right"> 
      <div class="bmargin5 fk-bold price ng-binding" ng-show="product.promotion_discount!=0 || product.cashback!=0 || product.sourcing_fee!=0 || product.pickup_charge!=0"> Rs.799</div> 
      <!-- ngIf: product.promotion_discount==0 && product.cashback==0 && product.sourcing_fee==0 && product.pickup_charge==0 --> 
      <div class="price-adjust bmargin5" ng-show="product.show_mrp &amp;&amp; product.mrp!=0 &amp;&amp; product.mrp!=product.item_selling_price &amp;&amp; product.mrp>product.item_selling_price">MRP: <span class="strike ng-binding">Rs.2300</span></div> 
      <!-- ngIf: product.promotion_discount!=0 || product.cashback!=0 || product.sourcing_fee!=0 || product.pickup_charge!=0 --> 
      <div class="popup_recent_our_price fk-font-11 fk-fontlight ng-scope" ng-if="product.promotion_discount!=0 || product.cashback!=0 || product.sourcing_fee!=0 || product.pickup_charge!=0">Selling Price: <!-- ngIf: product.price.selling_price --> <!-- ngIf: product.price && !product.price.selling_price --><span ng-if="product.price &amp;&amp; !product.price.selling_price" class="strike ng-scope ng-binding">Rs.979</span><!-- end ngIf: product.price && !product.price.selling_price --></div> 
      <!-- end ngIf: product.promotion_discount!=0 || product.cashback!=0 || product.sourcing_fee!=0 || product.pickup_charge!=0 --> <span class="price-adjust ng-binding ng-hide" ng-show="product.sourcing_fee &amp;&amp; product.feeType">(Incl. Rs.0 fee)</span> 
      <div class="price-adjust tmargin5 ng-binding ng-hide" ng-show="product.pickup_charge > 0">(+) Pickup Charges: Rs.0</div> 
      <div class="price-adjust tmargin5 ng-binding ng-hide" ng-show="product.cashback!=0">(-) Cashback: 0</div> 
      <div class="price-adjust tmargin5 ng-binding ng-hide" ng-show="product.net_octroi_charge > 0">Octroi: Rs.0</div> 
      <div class="offer-color fk-font-11 tmargin5 ng-binding" ng-show="product.promotion_discount>0">(-) Savings: Rs.180</div> 
     </div></td> 
    </tr> 
    </tbody> 
</table>

來源

2017-04-19 user5858

我不明白你在問什麼。什麼是_page_？一般來說，如果你想唯一標識一個DOM元素，你可以添加一個'id'屬性。您需要確保這些屬性是唯一的。 –

@AndrewEisenberg這就是我要問的。網頁中沒有任何ID，也不是由我製作/控制的。 – user5858

所以，這實際上與angularjs或jquery無關。你只需要知道如何創建一個DOM表達式，可以從某些頁面提取某些元素。如果不知道你想要關注什麼元素，就不可能知道如何回答這個問題。 –

，如果你有接取或者可以與應用於div的類您可以與網頁的URL去。

來源

2017-04-27 08:32:30 geminiousgoel

在這種情況下，我會嘗試使用標識不同視圖模式的「模式」標誌逐漸交換到基於組件的體系結構，使用ui-router使用嵌套視圖。你可以有一個獨特模式的「商店商品清單」（只讀），那麼你可以使用共享的組件來「創建」，「查看詳細信息」和「編輯」項目形式，它可以改變其內部佈局取決於該模式標誌。

來源

2017-04-28 09:09:45

如果你只需要識別某些元素，你可以使用chrome devTool檢查，通過點擊該元素，右鍵點擊'複製'CSS選擇器。

來源

2017-04-30 03:30:22

識別基於Angularjs頁面困境的元素/頁面

回答

相關問題