从父作用域数组中删除项

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重复在这里重复

<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单击。我猜它应该把虚拟机传给控制器。您可以将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>

最后，控制器接收vm并将其移除

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

Answer 2

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

Answer 3

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

您可以在父作用域上编写一个事件处理程序$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。我编辑了display属性，使其为"none"。这在我们将结果从API加载到数组中，然后加载到模板中的情况下很有用。

希望它能帮助到别人。此外，如果这是性能方面非常未优化的，请告诉我。