访问从angularjs控制器中选中的复选框

Question

有几个复选框和一个按钮。当我按下按钮时，需要知道在控制器中选中了所有复选框。

我有一个控制器微控制器我有$scope.selected_machines = {}

html文件具有动态创建的复选框

<tr ng-repeat="(m, res) in results.byMachine">
   <td> {{ m }}
     <input type="checkbox" id ="{{ m }}" name="bypass_check"
            ng-disabled="disableBypassWaitForDrainedCheck(m, results.bypassed_machines)"
            ng-model="selected_machines[m]">
  </td>

使用指令调用html文件

.directive('visualizer', [$window, function ($window) {
    return {
      restrict: 'E',
      scope: {
        selected: '<selected',
      },
      templateUrl: 'static/html/ng/visualizer.html',
      link: function (scope, element, attrs) {
        scope.data = {}
        scope.pollers = {}
        scope.rendered = {}
        scope.table = {}
.........

按钮单击功能是从角度服务文件中调用的bypassWaitForDrained()功能，并且在控制器Mcontroller中定义。我需要从此功能访问选中的复选框。尝试以下操作，selected_machines中的值永远不会更新。基本上ngModel selected_machines数据不会在控制器中更新。我可以知道是什么原因吗？

$scope.bypassWaitForDrained = function(pipelineId) {

    Loop through selected_machines
}

Answer 1

该指令使用隔离范围，这意味着其范围不会从父范围继承任何东西。父作用域属性需要绑定到隔离作用域：

.directive('visualizer', [$window, function ($window) {
    return {
      restrict: 'E',
      scope: {
        selected: '<selected',
        //IMPORTANT
        selected_machines: '<selectedMachines'
      },
      templateUrl: 'static/html/ng/visualizer.html',
      link: function (scope, element, attrs) {
        scope.data = {}
        scope.pollers = {}
        scope.rendered = {}
        scope.table = {}

用法：

<div ng-controller="Mcontroller">
    <visualizer selected-machines="selected_machines" selected="...">
    </visualizer>
</div>

这会将$scope.selected_machines中的Mcontroller对象引用绑定到指令的隔离范围。

有关更多信息，请参阅

• AngularJS Developer Guide - Isolating the scope of a directive