是否可以從另一個控制器中的按鈕觸發按鈕元素的點擊？

Question

我想用angular modal的CRUD操作，從而進行實彈射擊的模式，我們在ng-controller="ModalDemoCtrl" ID modalFire有按鈕，這是我的模式：

<div ng-controller="ModalDemoCtrl"> 
    <script type="text/ng-template" id="myModalContent.html"> 
     <div class="modal-header"> 
      <h3 class="modal-title">....</h3> 
     </div> 
     <div class="modal-body"> 
      <form id="productForm" novalidate> 
       <div> 
        <label for="ProductName"> productName :</label> 
        <input type="text" name="ProductName" id="ProductName" ng-model="model.ProductName" value="" required /> 

       </div> 
       <div style="margin:10px"> 
        <label for="Price">price :</label> 
        <input type="text" name="Price" id="Price" ng-model="model.Price" /> 
       </div> 
      </form> 

     </div> 
     <div class="modal-footer"> 
      <button class="btn btn-primary" type="button" ng-click="Save()" ng-disabled="productForm.$invalid">save</button> 
      <button class="btn btn-warning" type="button" ng-click="cancel()">Cancel</button> 
     </div> 
    </script> 
    <button type="button" id="modalFire" class="btn btn-default modalBtn" ng-click="open()">UpdateProduct</button> 
</div> 

，它的控制器：

App.controller('ModalDemoCtrl', function ($scope, $modal) { 


    $scope.open = function (size) { 

     var modalInstance = $modal.open({ 
      animation: true, 
      templateUrl: 'myModalContent.html', 
      controller: 'ModalInstanceCtrl', 
      size: size, 
      resolve: { 
       items: function() { 
        return $scope.items; 
       } 
      } 
     }); 
    }; 
}); 

App.controller('ModalInstanceCtrl', function ($scope, $modalInstance, $http) {  
    $scope.cancel = function() { 
     $modalInstance.dismiss('cancel'); 
    }; 
}); 

和我有一個網格，顯示ProductList：

<div ng-controller="ProductController" ng-init="GetAllProducts()"> 
    <div class="row" style="margin-top:90px" ng-show="!ShowGrid"> 
     <article class="widget"> 
      <header class="widget__header"> 

       <div class="widget__title"> 
        <i class="pe-7s-menu"></i><h3>ProductList</h3> 
       </div> 
       <div class="widget__config"> 
        <a href="#"><i class="pe-7f-refresh"></i></a> 
        <a href="#"><i class="pe-7s-close"></i></a> 
       </div> 
      </header> 

      <div class="widget__content table-responsive"> 

       <table class="table table-striped media-table"> 
        <thead style="background-color:rgba(33, 25, 36,0.1)"> 
         <tr> 

          <th style="width:30%">price</th> 
          <th style="width:30%">productName</th> 
         </tr> 
        </thead> 
        <tbody> 
         <tr ng-repeat="product in Products"> 

          <td>{{product.Price}}</td> 
          <td>{{product.ProductName}}</td> 
         </tr> 
        </tbody> 
       </table> 
      </div> 
     </article> 
    </div> 
</div> 

所以，我想辦法增加button或<a> element對於可以觸發模式的網格中的每一行，有沒有什麼辦法？

Answer 1

除非我誤解了你的問題，爲什麼不把這個按鈕添加到你的表中的ng-repeat。例如：

<table class="table table-striped media-table"> 
    <thead style="background-color:rgba(33, 25, 36,0.1)"> 
     <tr> 
      <th>Price</th> 
      <th>ProductName</th> 
      <th>Edit</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr ng-repeat="product in Products"> 
      <td>{{product.Price}}</td> 
      <td>{{product.ProductName}}</td> 
      <td><button ng-click="loadItem(product)>Edit</button></td> 
     </tr> 
    </tbody> 
</table> 

然後在您的控制器內，只需將產品傳遞到您的模態加載功能。例如：

​​

瞭解如何將產品傳遞給函數，然後使用resolve將產品傳遞到模態。在您的模式控制器中，您可以將產品附加到$scope，並像使用其他任何視圖一樣使用它。