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>

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

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

Answer 2

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

Answer 3

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

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

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

Answer 4

即使在使用父作用域从数组中删除列表项时，我也无法从模板中的列表中删除元素。

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

set.seed(82418)
data <- data.frame(matrix(rbinom(10*100000, 50, .5), ncol=200))[1:50, 1:20]
rownames(data) <- paste0("gene", 1:50) 
colnames(data) <- paste0("spot", 1:20)

gene_combns <- combn(row.names(data), 2, simplify = FALSE)
# [[1]]
# [1] "gene1" "gene2"    
# [[2]]
# [1] "gene1" "gene3"    
# [[3]]
# [1] "gene1" "gene4"    
# [[4]]
# [1] "gene1" "gene5"    
# [[5]]
# [1] "gene1" "gene6"    
# [[6]]
# [1] "gene1" "gene7"

test <- sapply(gene_combns, spear_func)  # SAME FUNC BUT WITH cor.test
test[,1:5]

#             [,1]                              [,2]                             
# statistic   885.1386                          1659.598                         
# parameter   NULL                              NULL                             
# p.value     0.1494607                         0.2921304                        
# estimate    0.3344823                         -0.2478179                       
# null.value  0                                 0                                
# alternative "two.sided"                       "two.sided"                      
# method      "Spearman's rank correlation rho" "Spearman's rank correlation rho"
# data.name   "row1 and row2"                   "row1 and row2"                  
#             [,3]                              [,4]                             
# statistic   1554.533                          1212.988                         
# parameter   NULL                              NULL                             
# p.value     0.4767667                         0.7122505                        
# estimate    -0.1688217                        0.08797877                       
# null.value  0                                 0                                
# alternative "two.sided"                       "two.sided"                      
# method      "Spearman's rank correlation rho" "Spearman's rank correlation rho"
# data.name   "row1 and row2"                   "row1 and row2"                  
#             [,5]                             
# statistic   1421.707                         
# parameter   NULL                             
# p.value     0.7726922                        
# estimate    -0.06895299                      
# null.value  0                                
# alternative "two.sided"                      
# method      "Spearman's rank correlation rho"
# data.name   "row1 and row2"

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

希望它可以帮助某人。另外，如果在性能方面还没有优化，请告诉我。

从父作用域数组

4 个答案: