Question

我无法在Angular js ng-repeat中使用双向数据绑定。我在指定了ng-repeat的同一元素上指定了ng-controller- 我刚刚了解到，通过这样做，我可以抓住每个被ng-repeat重复的项目。这是HTML：

<div ng-controller="OtherController">
  <div id="hoverMe" ng-controller="ItemController" ng-mouseenter="addCaption()" 
    ng-mouseleave="saveCaption()" ng-repeat="image in images">
    <div class="imgMarker" style="{{image.css}}">                           
      <div ng-show="image.captionExists" class="carousel-caption">
        <p class="lead" contenteditable="true">{{image.caption}}</p>
      </div>
    </div>
  </div>
</div>

这是ItemController：

function ItemController($scope){
  $scope.addCaption = function(){
    if($scope.image.captionExists === false){
      $scope.image.captionExists = true;
    }
  }
  $scope.saveCaption = function(){
    console.log($scope.image.caption);
  }
}

和OtherController：

function OtherController($scope){
  $scope.images = ..
}

当我将鼠标悬停在＃hoverMe-div上时，正确添加了caption-div。但是当我在段落中输入一些文本然后将鼠标从＃hoveMe-div移开时，$ scope.image-variables标题值不会在saveCaption方法中更新。我明白我错过了什么。但它是什么？

Answer 1

您不需要在具有ng-repeat的同一元素上指定ng-controller来获取每个项目。

你可以得到这样的项目：

<div ng-repeat="image in images" ng-mouseenter="addCaption(image)" ng-mouseleave="saveCaption(image)" class="image">

在您的控制器代码中：

$scope.addCaption = function (image) {
    if(!image.captionExists){
      image.captionExists = true;
    }
};

要让contenteditable工作，您需要使用ng-model和正确更新模型的指令。

以下是基于documentation：

的简单示例

app.directive('contenteditable', function() {
  return {
    require: 'ngModel',
    link: function(scope, element, attrs, controller) {

      element.on('blur', function() {
        scope.$apply(function() {
          controller.$setViewValue(element.html());
        });
      });

      controller.$render = function(value) {
        element.html(value);
      };
    }
  };
});

请注意，该指令可能需要更多逻辑才能处理例如换行符。

这是一个有效的Plunker：http://plnkr.co/edit/0L3NKS?p=preview

Answer 2

我假设您正在编辑p中的内容，并且期望模型image.caption更新。要使其工作，您需要设置双向绑定。

2路绑定可用于支持ng-model的元素，或者需要手动同步数据。查看ngModelController documentation以及那里提供的示例。它应该符合你的目的。

与ng-repeat相同的元素上的Ng控制器 - 没有双向数据绑定

2 个答案: