角度ui bootstrap模式無法正常工作ng重複

Question

嘿傢伙我試圖爲每個項目分配每個模式，但它似乎並沒有像我所期望的那樣工作。

我期望它只會在一次觸發一個模態，而不是全部在一起。

例如我在這裏有3個項目，每個項目都有其刪除按鈕，每個按鈕都可以觸發一個模式框。

但是我點擊任何delete button它將觸發所有modalbox這樣

這是代碼我到目前爲止

HTML（模式視圖）

<script type="text/ng-template" id="myModalContent.html"> 
// ng-repeat to display the "title" in modalbox 
<div ng-repeat='data in modalData'> 
     <div class="modal-body"> 
      <p class="text-center"> Are you sure you want to <span class="maroon">delete</span><br/> 
      " <b>{{data.channelTitle}}</b> " <br/> 
      this channel and tag <b>permanently</b> ?</p> 
      <p class="text-center">This action <b>CANNOT</b> be undone.</p> 
      <br/> 
      <br/> 
     <form class="pure-form pure-form-aligned text-center"> 
      <p class="text-center red pure-splash-subhead" ng-if="errorMessage">{{errorMessage}}</p> 
     <b>Please type in the title of the post to confirm.</b><br/> 
     <br/> 
      <input required ng-model="titleform" type="text" placeholder="{{data.title}}"> 
      <br/> 

<input type='submit' ng-click="confirm(titleform)" value="I understand the consequences, delete this post"class="pure-button pure-button-error"> 

     </form> 
     </div> 
     <div class="modal-footer"> 
      <b> <a href="" ng-click="cancel()">Cancel</a></b> 
     </div> 
</div> 
    </script> 

控制器

$http.post('/channelHandler/getChannelByUser',data). 
     success(function(channelData) { 
     $scope.channels = channelData; 
     $scope.open = function() { 
       $scope.items = channelData; 
       var modalInstance = $modal.open({ 
        templateUrl: 'myModalContent.html', 
        controller: ModalInstanceCtrl, 
        resolve: { 
        items: function() { 
        return $scope.items; 
        } 
       } 
       }); 
       } 
     }) 
    }) 

modalInstanceCrtl

var ModalInstanceCtrl = function ($scope, $modalInstance,items) { 
        $scope.modalData = items; 
        $scope.cancel = function() { 
        $modalInstance.dismiss('cancel'); 
        }; 
        $scope.confirm = function(titleform){ 
        if(titleform === items.title){ 
         $http.delete('/contentHandler/post/'+$routeParams.permalink+'/delete'). 
         success(function(data){ 
          $location.path('/'); 
         }).error(function(err){ 
          alert(err); 
          $scope.errorMessage = err; 
         }); 
        $modalInstance.dismiss('cancel'); 
        }else{ 
         $scope.errorMessage = "Please enter the correct title " 
        } 

        } 

       }; 

可我知道的是它這樣做正確的做法？

Answer 1

某些信息丟失，但或許它應該是這個樣子：

HTML（模式視圖）

<script type="text/ng-template" id="myModalContent.html">  
    <div class="modal-body"> 
    <p class="text-center"> Are you sure you want to <span class="maroon">delete</span><br/> 
      " <b>{{data.channelTitle}}</b> " <br/> 
      this channel and tag <b>permanently</b> ?</p> 
    <p class="text-center">This action <b>CANNOT</b> be undone.</p> 
    <br/> 
    <br/> 
    <form class="pure-form pure-form-aligned text-center"> 
     <p class="text-center red pure-splash-subhead" ng-if="errorMessage">{{errorMessage}}</p> 
     <b>Please type in the title of the post to confirm.</b><br/> 
     <br/> 
     <input required ng-model="titleform" type="text" placeholder="{{data.title}}"> 
     <br/> 
     <input type='submit' ng-click="confirm(titleform)" value="I understand the consequences, delete this post"class="pure-button pure-button-error"> 
    </form> 
    </div> 
    <div class="modal-footer"> 
    <b> <a href="" ng-click="cancel()">Cancel</a></b> 
    </div> 
</script> 

控制器

$http.post('/channelHandler/getChannelByUser',data). 
    success(function(channelData) { 
    $scope.channels = channelData; 

    $scope.delete = function (currentChannel) {      
     var modalInstance = $modal.open({ 
     templateUrl: 'myModalContent.html', 
     controller: ModalInstanceCtrl, 
     resolve: { 
      item: function() { 
      return currentChannel; 
      } 
     } 
     }); 
    } 
    }); 

刪除按鈕需要像ng-click="delete(data)"。其中data是單通道。

modalInstanceCrtl

var ModalInstanceCtrl = function ($scope, $modalInstance, item) { 

    $scope.data = item; 

    $scope.cancel = function() { 
    $modalInstance.dismiss('cancel'); 
    }; 
    $scope.confirm = function(titleform){ 
    if (titleform === items.title) { 
     $http.delete('/contentHandler/post/'+$routeParams.permalink+'/delete'). 
     success(function(data){ 
      $location.path('/'); 
     }).error(function(err){ 
      alert(err); 
      $scope.errorMessage = err; 
     }); 
     $modalInstance.dismiss('cancel'); 
    }else{ 
     $scope.errorMessage = "Please enter the correct title " 
    } 
    } 
};