使用ng repeat，angular ui bootstrap modal无法正常工作

Question

嘿伙计们，我试图将每个模态分配到我拥有的每个项目，但它似乎没有像我预期的那样工作。

我原本以为它一次只会触发一个模态，而不是一起触发。

例如我这里有3个项目，每个项目都有删除按钮，每个按钮都可以触发模态框。

但是我点击任何delete button它会触发所有类似

的模态框

这是我到目前为止的代码

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 "
    }
  }
};