Angularjs指令不會彈出與單個選定的行

Question

我想將基於選擇的每個scope.selectedLiability傳遞到彈出窗口模式從recordRecommendedLiabilityCash指令到每次點擊時的detailViewRecommendedLiabilityCash指令。

以下是recordRecommendedLiabilityCash中的核心功能。

  scope.openDetailView = function (id) { 
       // console.log(scope.recommendedLiabilities[id]); 
       scope.selectedLiability = scope.recommendedLiabilities[id]; 
       console.log(scope.selectedLiability); 
       if (!scope.detailViewFlag) { 
        scope.detailViewFlag = true; 
       } 
      }; 

到這裏一切都沒問題。在每次點擊console.log（scope.selectedLiability）;顯示相應的選定數據。現在，我試圖將scope.selectedLiability傳遞給嵌套指令detailViewRecommendedLiabilityCash。但是，每次點擊只有第一個或第0個索引值彈出窗口。

Picture for index 0

Picture for index 2

如果您在圖像上仔細觀察，我們可以看到這兩個數據都是在這兩個相同的點擊。但是，我需要在相應的點擊中選擇相應的數據。

對不起，代碼亂了。這不是我自己的代碼。我正在幫助我的朋友。我卡在這裏。

//recordRecommendedLiabilityCash directive 
 

 
.directive('recordRecommendedLiabilityCash', function() { 
 
     return { 
 
      restrict: 'E', 
 
      templateUrl: 'cash/savings-liabilities/recommended-liability-accounts/record-recommended-liability.html', 
 
      scope: { 
 
       rlc: '=', 
 
       liabilities: '=', 
 
       listOfLumpSumSource: '=listOfLumpSumSource', 
 
       id: '=', 
 
       recommendedLiabilities: '=' 
 
      }, 
 
      link: function (scope, element, attrs) { 
 
       scope.detailViewFlag = false; 
 
       scope.removeRecommendedLiabilityRecordCash = function() { 
 
        if (scope.rlc.active) { 
 
         scope.rlc.active = false; 
 
        } 
 

 
        // To-Do: Refactor into reusable function 
 
        for (var i = 0; i < scope.liabilities.length; i++) { 
 
         if (scope.rlc.legacyId === scope.liabilities[i].id) { 
 
          if (!scope.liabilities[i].active) { 
 
           scope.liabilities[i].active = true; 
 
          } 
 
         } 
 
        } 
 
       }; 
 

 
       scope.openDetailView = function (id) { 
 
        // console.log(scope.recommendedLiabilities[id]); 
 
        scope.selectedLiability = scope.recommendedLiabilities[id]; 
 
        console.log(scope.selectedLiability); 
 
        if (!scope.detailViewFlag) { 
 
         scope.detailViewFlag = true; 
 
        } 
 
       }; 
 

 
      } 
 
     }; 
 
    }) 
 
    
 
    
 
    //detailViewRecommendedLiabilityCash directive 
 
    
 
    .directive('detailViewRecommendedLiabilityCash', function() { 
 
     return { 
 
      restrict: 'E', 
 
      templateUrl: 'cash/savings-liabilities/recommended-liability-accounts/detail-view-recommended-liability.html', 
 
      scope: { 
 
       rlc: '=', 
 
       listOfLumpSumSource: '=listOfLumpSumSource', 
 
       detailViewFlag: '=', 
 
       recommendedLiabilities: '=', 
 
       id: '=id', 
 
       selectedLiability: '=selectedLiability' 
 
      }, 
 
      link: function (scope, element, attrs) { 
 
       console.log(scope.selectedLiability); 
 
       scope.rlc.payment_amount = ''; 
 
       scope.rlc.due_amount = scope.rlc.remainingBalance; 
 
       console.log(scope.listOfLumpSumSource); 
 
       scope.selectedLumpSumSource = null; 
 
       console.log(scope.selectedLumpSumSource); 
 
       console.log(scope.recommendedLiabilities, scope.id); 
 
       scope.lumpSumDataSource = [ 
 
        { 
 
         "companyName": "FCB", 
 
         "productName": "Product1" 
 
        }, 
 
        { 
 
         "companyName": "First Command", 
 
         "productName": "Product2" 
 
        }, 
 
        { 
 
         "companyName": "Second Command", 
 
         "productName": "Product3" 
 
        } 
 

 
       ]; 
 
       //scope.lumpSumSource = scope.rlc.lumpSumSource; 
 
       console.log(scope.rlc.lumpSumSource); 
 
       //scope.lumpSumDataSource.push(scope.rlc.lumpSumSource); 
 

 
       // Intialize default variables 
 
       var defaultLumpSumObject = {'lumpSumSource': '', 'lumpSumAmount': '', 'remainingBalance': ''}; 
 
       scope.lumpSumArray = [defaultLumpSumObject]; 
 
       scope.exisitingAccountObj = { 
 
        monthlyPayment: scope.rlc.monthlyPayment 
 
       }; 
 
       // Function to add lumpsum source 
 
       scope.addSource = function() { 
 
        scope.lumpSumArray.push(defaultLumpSumObject); 
 
       }; 
 

 
       // Function to delete lumpsum source 
 
       scope.deleteSource = function(index) { 
 
        scope.lumpSumArray.splice(index,1); 
 
       }; 
 

 
       scope.closeDetailView = function() { 
 
        if (scope.detailViewFlag) { 
 
         scope.detailViewFlag = false; 
 
        } 
 
       }; 
 

 
       // When the user clicks anywhere outside of the modal, close it 
 
       element.on('click', function (e) { 
 
        var target = $(e.target); 
 
        if (!target.closest('.modal-content').length) { 
 
         scope.$evalAsync(scope.closeDetailView()); 
 
        } 
 
       }); 
 

 
       scope.saveRecommendedLiabilityAccount = function() { 
 
        scope.rlc.remainingBalance = scope.rlc.remainingBalance - scope.rlc.payment_amount; 
 
        scope.rlc.lumpSumAmount = scope.rlc.lumpSumAmount - scope.rlc.payment_amount; 
 
        console.log(scope.rlc.lumpSumAmount); 
 
       }; 
 

 
      } 
 
     }; 
 
    });

<!--recordRecommendedLiabilityCash template --> 
 
<div class="Table-row"> 
 
    <div class="Table-row-item" data-header="Company"> 
 
    <a class="edit-view" ng-click="openDetailView(id)" data-toggle="modal" data-target="#{{'modal-detail-view-cash-rec-liability-' + rlc.id}}">{{ rlc.companyName }}</a> 
 
    </div> 
 
    <div>{{selectedLiability}}</div> 
 
    <div class="Table-row-item" data-header="Product">{{ rlc.productName }}{{rlc.id}}{{id}}</div> 
 
    <div class="Table-row-item" data-header="Liability Type">{{ rlc.liabilityType }}</div> 
 
    <div class="Table-row-item" data-header="Owner">{{ rlc.owner }}</div> 
 
    <div class="Table-row-item" data-header="Loan Balance">{{ rlc.remainingBalance | currency:"$":0 }}</div> 
 
    <!-- <div class="Table-row-item" data-header="Lump Sum">{{ rlc.LibtyLumpSumFundBal | currency:"$":0 }}</div>--> 
 
    <div class="Table-row-item" data-header="Monthly">{{ rlc.monthlyPayment | currency:"$":2 }}</div> 
 
    <div class="Table-row-item custom-select" data-header="Action"> 
 
    <select id="action" name="action"> 
 
     <option value="">I Want To …</option> 
 
     <option value="Retain">Retain</option> 
 
     <option value="Consolidate">Consolidate</option> 
 
     <option value="Pay-Off">Pay-Off</option> 
 
     <option value="Pay-Down">Pay-Down</option> 
 
    </select> 
 
    <div class="select__arrow"></div> 
 
    </div> 
 
    <!-- <div class="Table-row-item status" data-header="Status"> 
 
    <div>{{ rlc.status }}</div> 
 
    <a class="close-button" ng-click="removeRecommendedLiabilityRecordCash()"></a> 
 
    </div>--> 
 
</div> 
 

 

 

 
<detail-view-recommended-liability-cash rlc="rlc" selected-liability="selectedLiability" recommended-liabilities="recommendedLiabilities" id="id" list-of-lump-sum-source="listOfLumpSumSource" detail-view-flag="detailViewFlag"></detail-view-recommended-liability-cash> 
 

 

 
<!-- template for details view recommended liability-cash --> 
 
<div class="modal fade" role="dialog" id="{{'modal-detail-view-cash-rec-liability-' + rlc.id}}"> 
 
    <div class="modal-dialog modal-lg"> 
 
    <div class="modal-content"> 
 
     <div class="modal-header"> 
 
     <span class="close" data-dismiss="modal">&times;</span> 
 
     <h4>Savings - Liabilities <label class="pull-right">{{ rlc.remainingBalance }}</label></h4> 
 
     <div class="row"> 
 
      <div class="col-lg-12 col-md-12 col-sm-12"> 
 
      <label class="header-sub-label">Owner: <span>{{ rlc.owner }}</span></label> 
 
      <label class="header-sub-label pull-right">Loan Balance</label> 
 
      </div> 
 
     </div> 
 
     </div> 
 
     <form name="recommendedLiabilityForm" novalidate > 
 
     <div class="modal-body"> 
 
      <div class="row"> 
 
      <div class="col-lg-3 col-md-3 col-sm-3"> 
 
       <label class="control-label">Company</label> 
 
       <label class="control-value">{{ selectedLiability.companyName }}</label> 
 
      </div> 
 
      <div class="col-lg-3 col-md-3 col-sm-3"> 
 
       <label class="control-label">Product</label> 
 
       <label class="control-value">{{ selectedLiability.productName }}</label> 
 
      </div> 
 
      <div class="col-lg-6 col-md-6 col-sm-6"> 
 
       <label class="control-label">Description</label> 
 
       <label class="control-value">{{ selectedLiability.description }}</label> 
 
      </div> 
 
      </div> 
 
      <div class="row display-row"> 
 
      <div class="col-lg-3 col-md-3 col-sm-3"> 
 
       <label class="control-label">Liability Type</label> 
 
       <label class="control-value">{{ selectedLiability.liabilityType }}</label> 
 
      </div> 
 
      <div class="col-lg-3 col-md-3 col-sm-3"> 
 
       <label class="control-label">Mortgage Type</label> 
 
       <label class="control-value">{{ selectedLiability.mortgageType }}</label> 
 
      </div> 
 
      <div class="col-lg-3 col-md-3 col-sm-3"> 
 
       <label class="control-label">Interest Rate</label> 
 
       <label class="control-value">{{ selectedLiability.interestRate | currency:"$":2 }}%</label> 
 
      </div> 
 
      <div class="col-lg-3 col-md-3 col-sm-3"> 
 
       <label class="control-label">Payment Type</label> 
 
       <label class="control-value">{{ selectedLiability.paymentType }}</label> 
 
      </div> 
 
      </div> 
 
      <div class="row"> 
 
      <div class="col-lg-3 col-md-3 col-sm-3"> 
 
       <label class="control-label">Current Monthly Payment</label> 
 
       <label class="control-value">{{ selectedLiability.monthlyPayment }}</label> 
 
      </div> 
 
      <div class="col-lg-3 col-md-3 col-sm-3"> 
 
       <label class="control-label">Payment Frequency</label> 
 
       <label class="control-value">{{ selectedLiability.paymentFrequency }}</label> 
 
      </div> 
 
      <div class="col-lg-6 col-md-6 col-sm-6"> 
 
       <label class="control-label">Remaining Term</label><br> 
 
       <label class="control-label">Years</label><span> {{ rlc.remainingTermYears }} </span> 
 
       <label class="control-label">Months</label><span> {{ rlc.remainingTermMonths }} </span><br> 
 
       <label class="control-label">End Date:</label><span> {{ rlc.remainingTermEndDate | date:'yyyy-MM-dd' }} </span> 
 
      </div> 
 
      </div> 
 
      <hr /> 
 
      <label class="heading">Funding</label> 
 
      <div class="row"> 
 
      <div class="col-lg-6 col-md-6 col-sm-6 form-group"> 
 
       <label for="monthlyFunding">Recommended Monthly Payment</label> 
 
       <input name="monthlyFunding" ng-model="exisitingAccountObj.monthlyPayment" class="form-control col-md-6 col-lg-6 col-sm-6" type="text" /> 
 
      </div> 
 
      </div> 
 
      <label class="heading">Lump Sum</label> 
 
      <div class="row" ng-repeat="lumpSumData in lumpSumArray track by $index"> 
 
      <div class="col-lg-3 col-md-3 col-sm-3 form-group"> 
 
       <label for="source" class="control-label">Source</label> 
 
       <select name="source" ng-model="selectedLumpSumSource" 
 
         ng-options="lumpSumSource as lumpSumSource for lumpSumSource in listOfLumpSumSource" 
 
         class="form-control" ng-change="getLumpSumAmount(selectedLumpSumSource)"></select> 
 
       <!--<select name="source" ng-model="source" ng-options="source for source in lumpSumSource" class="form-control"></select>--> 
 
      </div> 
 
      <div class="col-lg-3 col-md-3 col-sm-3 form-group"> 
 
       <label for="amount" class="control-label">Amount</label> 
 
       <input name="amount" ng-model="rlc.payment_amount" class="form-control" type="number" min="0" max="{{rlc.remainingBalance}}" required /> 
 
      </div> 
 
      <div ng-messages="recommendedLiabilityForm.amount.$error" style="color:red"> 
 
       <div ng-message="validationError">this is the error</div> 
 
       <div ng-message="required">Must have value</div> 
 
       <div ng-message="minlength">Must be 5 char length</div> 
 
      </div> 
 
      <div class="col-lg-4 col-md-4 col-sm-4"> 
 
       <label class="control-label">Remaining Balance</label> 
 
       <label class="control-value">{{selectedLiability.lumpSumAmount - selectedLiability.payment_amount | currency:"$":2}}</label> 
 
      </div> 
 
      <div class="col-lg-2 col-md-2 col-sm-2 vertical-line"> 
 
       <span class="glyphicon glyphicon-trash" ng-click="deleteSource($index)"></span> 
 
      </div> 
 
      </div> 
 
      <div class="row"> 
 
      <div class="col-lg-12 col-md-12 col-sm-12 add-button-container"> 
 
       <button type="button" class="btn btn-primary" ng-click="addSource()"><span class="glyphicon glyphicon-plus"></span><span class="add-more-button">Add Another Source</span></button> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </form> 
 
     <div class="modal-footer"> 
 
     <button type="button" class="btn btn-default" data-dismiss="modal">cancel</button> 
 
     <button type="submit" class="btn btn-primary" ng-click="saveRecommendedLiabilityAccount()">Save</button> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

這不是跟你粘貼代碼清晰，但看起來你正在創建N情態動詞，每每行一個：

<a class="edit-view" ng-click="openDetailView(id)" data-toggle="modal" data-target="#{{'modal-detail-view-cash-rec-liability-' + rlc.id}}">{{ rlc.companyName }}</a>

此鏈接應該打開匹配相同的模式rc.id。這意味着您有N<detail-view-recommended-liability-cash/>指令，每個指令rc.id一個。不是嗎？如果您沒有生成相同數量的<detail-view-recommended-liability-cash/>，每行一個，那麼您無法識別打開模式。不過，我認爲這是一個糟糕的主意，因爲不幸的是你有N個模態，全都指向相同的scope.selectedLiability對象。我不是100％肯定的，但如果你搞砸了一些東西，可能會出現這種情況，你總是看到最後呈現的模態。另外，引導程序是普通的JS + jQuery，並且您正在使用Angular作爲指令。

我認爲發生的事情是，當您第一次點擊時，Angular會渲染指向同一對象的所有模態，但在隨後的點擊中，對象不會在指令上刷新。也許是$ scope。$ apply（）可以修復這個bug嗎？

嘗試清理你的代碼，所以你只有一個模式，並確保它被分離指令，並做scope.detailViewFlag = true以前，確保你之前清理一切。一般來說，JS和Angular的表現不好，你需要在JS調用中濫用scope.$apply()。這就是爲什麼angular directives for bootstrap隔離傳遞一個新的對象，新的控制器等

要總結情態動詞：你有很多情態動詞的在你的代碼，每行一個，指着在recordRecommendedLiabilityCash指令相同的對象。當你第一次點擊時，所有的模態都被「填充」了，但是在第二次點擊時，你從來沒有從模態中清除信息，並且Angular從未刷新信息。要解決此問題：只使用一種模式，並確保在打開模式之前清除信息。

90％確定這是您的問題。嘗試通過id避免模態，並在Angular中的JS上手動控制它們，並檢查何時執行$ apply（）。

問候！