AngularJS：如何在指令范围的对象更改时更新与指令范围的对象关联的控制器范围？

Question

解释如下：

我的当前控制器创建了一个 $scope.plan.steps 数组，用于存储每个步骤：

.controller('PlanCtrl', function ($scope, $http) {
    $scope.plan = {
        steps: [{}]
    };

    $scope.addStep = function () {
        $scope.tutorial.steps.push({});
    }
}

然后我有以下指令，它有一个独立的范围，并且与 $scope.plan.steps 数组的索引相关联：

.directive('planStep', function () {
    return {
        template: '<input type="text" ng-model="step.name" />{{step}}',
        restrict: 'E',
        scope: {
            index: '=index'
        },
        transclude: true,
        controller: function($scope, $element, $transclude) {

            $scope.removeStep = function() {
                $scope.$emit('removeStep', $scope.index);
                $element.remove();
                $scope.$destroy();
            }

        }
    };
});

这两个在控制器范围内通信、创建和删除对象，但是，我怎样才能允许指令实时更新控制器的范围数组？

我尝试对指令的隔离范围更改执行 $watch，$emit 对控制器的更改，并指定 $index...但没有运气。

我创建了一个 plunker 来重现我目前拥有的东西：

Link

到目前为止，我可以在数组内创建和删除对象，但我无法获取单个对象来根据 $index 更新控制器的对象。

如果解释不清楚，一定要告诉我，我会详细说明。

谢谢

Answer 1

当您在 ng-repeat 内执行此类操作时，您可以利用 ng-repeat 创建的子作用域并在没有隔离作用域的情况下工作。

这是相同的指令，不需要任何角度事件

.directive('planStep', function() {
    return {
      template: '<button  ng-click="removeStep(step)">Delete step</button><br><input type="text" ng-model="step.name" />{{step}}<br><br>',
      restrict: 'E',          
      transclude: true,
      controller: function($scope, $element, $transclude) {
       var steps =  $scope.plan.steps// in scope from main controller
        /* can do the splicing here if we want*/
        $scope.removeStep = function(step) {
          var idx =steps.indexOf(step) 
           steps.splice(idx, 1);
        }
      }
    };
  });

还要注意，使用 element.remove() 删除元素是多余的，因为它会在数组拼接时自动被 angular 删除

至于更新，会实时更新item

DEMO

Answer 2

为索引设置 2 路绑定的方式也可以为 step 设置一个？而且您确实不需要索引来删除该项目，即使您的指令是孤立的，它也依赖于来自 ng-repeat 的索引，这可能不是一个好主意。

<plan-step ng-repeat="step in plan.steps" index="$index" step="step"></plan-step>

在你的指令中：

scope: {
    index: '=index',
    step:'='
 },

Demo

移除 $index 依赖和冗余元素 remove() 和作用域销毁（当从数组中移除项目时 angular 将自行管理它）：

 return {
  template: '<button  ng-click="removeStep()">Delete step</button><br><input type="text" ng-model="step.name" />{{step}}<br><br>',
  restrict: 'E',
  scope: {
    step:'='
  },
  transclude: true,
  controller: function($scope, $element, $transclude) {
    $scope.removeStep = function() {
      $scope.$emit('removeStep', $scope.step);
    }
  }

在你的控制器中：

 $scope.$on('removeStep', function(event, data) {
  var steps = $scope.plan.steps;
  steps.splice(steps.indexOf(data), 1);
});

Demo

如果您想摆脱 $emit，您甚至可以使用带有函数绑定 (&) 的隔离作用域指令公开一个 api。

return {
  template: '<button  ng-click="onDelete({step:step})">Delete step</button><br><input type="text" ng-model="step.name" />{{step}}<br><br>',
  restrict: 'E',
  scope: {
    step:'=',
    onDelete:'&' //Set up function binding
  },
  transclude: true
};

并在视图上注册它：

<plan-step ng-repeat="step in plan.steps"  step="step" on-delete="removeStep(step)"></plan-step>

Demo