javascript - 从父范围数组中删除元素

Question

在用户单击删除按钮后，我试图从我的 Controller 中定义的 json 数组中删除一个元素。该按钮位于指令的 html 模板内。

这是我的 Controller

listVMS.controller('vmInfoController', ['$scope', function($scope) {
  var json = [{
             image: 'img/fedora.png',
             status: 'running',
             name: 'Fedora',
             ip: '192.168.3.354',
             cores: '5',
             ram: '2GB',
             storage: '20GB'
             }];
  $scope.vms = json;

  $scope.removeVM = function() {
    alert("Hello, World");
  };
}]);

我的指令

listVMS.directive('vmInfo', function() { 
  return { 
    restrict: 'E', 
    scope: { 
      info: '=', 
      rmv: '&',
    }, 
    templateUrl: 'views/vmInfo.html',
    link: function(scope, element, attrs) {
      if(scope.info.status == 'running') {
        scope.buttonText = 'Pause';
        scope.act = 'pause';
      }
      else {
        scope.buttonText = 'Play';
        scope.act = 'play-circle';        
      }

      scope.sos = function() {
        if (scope.info.status == 'paused') {
          scope.info.status = "running";
          scope.buttonText = "Pause";
          scope.act = "pause";
        }
        else {
          scope.info.status = "paused";
          scope.buttonText = "Play";
          scope.act = "play-circle";
        }
      }
      scope.deleteVM = function(){
        scope.rmv();
      }
    },
  };
});

我正在使用 ng-repeat 在这里重复

<div class="row" ng-repeat="vm in vms">
     <vm-info info="vm"></vm-info>
</div>

在指令的模板中，我有一个应该触发 ng-click() 的按钮

<button type="button" class="btn btn-danger btn-lg center-block" ng-click="removeVM">Delete <span class='glyphicon glyphicon-remove'></span></button>

我想单击删除按钮并从范围中删除特定元素。因此，当范围被重新加载时，该元素的 div 也不会在那里，但 onclick 不会从模板内部触发。请帮助我是 angularjs 的新手，指令对我来说很棘手。

Answer 1

在您的指令中，您尝试绑定(bind) rmv 但您从未将 rmv 传递给 vm-info 指令。

<div class="row" ng-repeat="vm in vms">
     <vm-info info="vm" rmv="removeVM"></vm-info>
</div>

点击时将评估 ng-click。我猜它应该将 VM 传递给 Controller ​​。您可以将 rmv 函数直接传递给 ng-click 并在指令中取出 deleteVM 方法，而不是让指令通过中间方法调用此方法。

<button type="button"
        class="btn btn-danger btn-lg center-block"
        ng-click="rmv(info)">
    Delete <span class='glyphicon glyphicon-remove'></span>
</button>

最后，controller 接收到 vm 并移除它。

$scope.removeVM = function(vm){
    // remove vm from $scope.vms
}