javascript - AngularJS - ng-repeat 生成的 Controller 实例内的事件问题

Question

今天我遇到了一个问题，这对我来说听起来很奇怪，但肯定有一些合乎逻辑的解释......

我正在构建一个表，允许内联编辑字段值。例如，您会看到一个带有标题的范围，然后如果您单击它，则会出现内联编辑。

这是 ng-repeat 的包装

<div ng-repeat="product in products" ng-controller="ProductController">
</div>

如您所见，每次迭代都会创建 ProductController 的新实例。产品 Controller 触发一些事件，并相应地捕获它们。

myApp.controller('ProductController', function ($scope, $filter, $http, $document) {
//Show publications flag
$scope.showPublications = false;

//Inline edition object
$scope.inlineEdition = {
    enabled: false,
    title: false,
    sku: false,
    realstock: false,
    minstock: false
};

$document.bind('click', function(e) {
    e.stopPropagation();

    //Dispatch an event
    $scope.$emit("documentclick");
});

angular.element(".dev-inline-editor").bind('click', function(e) {
    e.stopPropagation();
});

angular.element(".inline-edit").bind('click', function(e) {
    e.stopPropagation();
    //Dispatch an event
    $scope.$broadcast("inlineEditWrapperClicked",[$scope.inlineEditionGetStatus('enabled')]);   
});

angular.element(".inventory-field span").bind('click', function(e) {
    e.stopPropagation();
});

$scope.$on("inlineEditWrapperClicked", function(e, inlineStatus) {
    if(inlineStatus[0] === true) {
        $scope.$apply(function () {
            $scope.terminateInlineEdition();
            e.stopPropagation();
        })
    }
});

$scope.$on("documentclick", function (e) {
    $scope.$apply(function() {
        $scope.terminateInlineEdition();
    })

});

 //Code goes on...

然后标记...

<div class="inventory-field inventory-row-minstock inline-edit inline-edit-regular">
   <span ng-hide="inlineEditionGetStatus('minstock')" ng-click="setInlineEdition('minstock')">{{product.min_stock}}</span>
   <div ng-show="inlineEditionGetStatus('minstock')" class="dev-inline-editor clearfix">      <input  type="text" ng-model="product.min_stock" />
    <input type="button" ng-click="inlineEditionEnd('minstock')" value="Ok" />
   </div>
</div>

inlineGetStatus 返回 true 或 false。它应该隐藏真实值的编辑器，这解释了为什么 $scope.$on("inlineEditWrapperClicked"需要一个真实值。

主 div 内的范围显示字段值，单击时显示输入。这个想法是，当您单击内联编辑器外部时，它将消失并且跨度将恢复到可见状态。

一切都像魅力一样......但是......

例如，当我有一个包含三行的表格时，我可以打开三个内联编辑器，单击它们一次。一切都很好，直到那里。如果我在最后一行的编辑器外部单击，该编辑器将被隐藏，并且显示字段值的范围将恢复。但是如果我在第一行的第一个编辑器之外单击，则第一个、第二个和第三个编辑器将同时隐藏。这似乎是 Controller 实例向下的链式效应。

我尝试过使用 $emit、$broadcast，似乎没有什么可以解决不良效果。我被困在这里，所以如果有人能启发我，我将不胜感激。

真正奇怪的是，每次我记录一个来自 getter getInlineEditorStatus(); 的属性时它返回与我拥有的 Controller 实例(或行)一样多的日志。我无法仅访问我需要的范围实例。

我真的要提前感谢你们能给我的任何帮助。

问候，

吉列尔莫

Answer 1

您可以为内联编辑器创建一个具有隔离范围的指令，并为页面使用单个 Controller 。这将有几个优点，首先，内联编辑器可以在其他地方轻松地重用，并且页面 Controller 可能更容易处理，因为只有一个实例。我认为这也可以解决您遇到的错误。

像这样在 ng-repeat 中创建多个 Controller 会激发我的蜘蛛感......