從父范圍數組中刪除項目

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的結果加載到數組然后再加載到模板的情況下，這很有用。

希望它可以幫助某人。 另外，如果這是性能方面的最佳選擇，請告訴我。