从父范围数组中删除项目

Question

当用户单击删除按钮后，我试图从控制器中定义的json数组中删除一项。 该按钮位于指令的html模板中。

这是我的控制器

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

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

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

单击时将评估ng-click。 我猜它应该将VM传递给控制器​​。 可以通过将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>

最后，控制器接收到虚拟机并将其删除。

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

Answer 2

您正在处理模块控制器中的单击，而应该通过指令控制器执行此操作时，另一种方法是将ng-click添加到隔离的指令范围中，从而将函数传递给范围变量。

Answer 3

虽然您可以通过这种方式解决问题，但我建议为此使用$ emit。

您可以在父作用域$on编写事件处理程序$on ，然后使用$emit从子作用域发出事件，而不是将父作用域的功能传递给子作用域。

在事件处理程序中，您可以删除所需的记录。

Answer 4

我在从模板的列表中删除元素时遇到了问题，即使使用父范围从数组中删除列表项也是如此。

我什至使用了偶数，并尝试从父控制器的数组中拼接出该项。 即使该项目已从数组（console.log）中删除，但模板未修改。

$rootScope.$emit('eventname', {
  param1: val1,
  param2: val2
});

$rootScope.$on('eventname', function(event, args) {
  if (args.param1 && args.param2) {
    //logic for removing here
  }
});

但是，如上所述，它不起作用。 因此，我使用重复的元素ID为每个div赋予了唯一的ID。 然后，我编辑了显示属性以使其“无”。 在我们将API的结果加载到数组然后再加载到模板的情况下，这很有用。

希望它可以帮助某人。 另外，如果这是性能方面的最佳选择，请告诉我。