2013-12-09 18 views
0

我目前在實現angularjs上的模態方面已經陷入困境。我對這個框架還是一個新東西,我使用了ng-modules.org,https://github.com/sarath2/ngEkathuwa ngEkathuwa中的一個模塊,它實現了bootstrap 3模式。但是,我很難理解如何使用模塊將ng-repeat列表的值傳遞給模態。在AngularJS中實現Ekathuwa模塊將ng-repeat值轉換爲模態

  <table ng-table="tableParams" class="table"> 
       <tr ng-repeat="uti in $data"> 
        <td data-title="'UTI Meter'" sortable="meter"> 
         {{uti.item}} 
        </td>     
        <td data-title="'Date'" sortable="cdate" align="middle"> 
         {{uti.cdate}} 
        </td> 
        <td align="middle" data-title="'Action'"> 
         <button type="button" class="btn btn-default" data-toggle="modal" data-target="#myDelete" ng-click="deleteUti(uti.ikey)"> 
          <span class="glyphicon glyphicon-remove-sign"></span> Delete 
         </button> 

         <button type="button" class="btn btn-default" data-toggle="modal" data-target="#myEdit"> 
          <span class="glyphicon glyphicon-edit"></span> Edit 
         </button> 

        </td> 
       </tr> 
      </table> 

從github上,http://plnkr.co/ebDtSMw6w0IZquaglEMe的例子中,僅表現靜態數據從一個按鈕觸發。我已經梳理了網站,有人說你必須使用解決方案來傳輸數據,然後在你的模式上顯示。再次,我無法找到它的文檔。我只是想知道,如果該模塊只支持靜態數據或解決方案應該在模態控制器下完成。

無論如何,下面是腳本和任何幫助克服這個絆腳石肯定會非常感激。

這裏是控制器:使用resolve {}實現。

myApp.controller('utiCtrl', 
    function gaugeCtrl($scope, $filter, ngTableParams, $log, $http, $ekathuwa){ 

    $scope.addUTI = function(){ 
     $ekathuwa.modal({ 
      id: "modalUTI", 
      scope: $scope, 
      templateURL: "./tpl/modal-uti.html" 
     }); 
    } 

    $scope.deleteUti = function(ikey){ 
     var p = $ekathuwa.modal({ 
      id: "modalUtiDelete", 
      scope: $scope, 
      contentPreSize: "sm", 
      controller: modalDeleteCtrl, 
      templateURL: "./tpl/modal-delete.html", 
      show: true, 
      resolve: { 
       meter: function(){ 
        return 'Test'; 
       } 
      } 

     }); 

     $q.when(p).then(function (m) { 
      m.modal('show'); 
     }); 
    } 

    var modalDeleteCtrl = function ($scope, $p, meter) { 

     $scope.meter = meter; 
    }; 
}); 
+0

很難確切地告訴你在這裏問什麼。基於文檔,它看起來不像ngEkathuwa使用「resolve」選項。在您的模板模板中,它可以訪問您傳入的範圍,因此您可以像調整其他模板一樣調用方法並設置數據。 –

+0

如何獲得我從ng-click =「deleteUti(uti.ikey)」傳遞的值並將其傳遞給模態,並最終通過模態模板顯示它? – MarkJ

+0

您的模式可以訪問您的範圍,因此您可以將其附加到範圍 - 就像其他任何角度視圖一樣。請參閱此處的示例:http://plnkr.co/edit/PMSAhaTuawF7lirOXAwd?p=preview –

回答

0

我能弄清楚我的問題的答案。謝謝布蘭登蒂利爲你舉例,它讓我對這個問題有了進一步的瞭解。

我需要通過範圍聲明模態內傳遞的值ikey。與使用ui.bootstrap的模式不同,此模塊也使用雙向綁定,並且不使用resolve {}將數據顯示到模式界面。

$scope.deleteUti = function(ikey){ 
     $scope.meter = ikey; 
     $ekathuwa.modal({ 
      id: "modalUtiDelete", 
      scope: $scope, 
      contentPreSize: "sm", 
      controller: modalDeleteCtrl, 
      templateURL: "./tpl/modal-delete.html" 

     }); 

     var modalDeleteCtrl = function ($scope) { 

     }; 
    } 
相關問題