0

我无法让双向数据绑定在 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);
  }
}

和其他控制器：

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

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

4

2 回答 2

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正确更新模型的指令。

这是一个基于文档的简单示例：

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

于 2013-10-22T07:45:47.053 回答
0

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

支持 ng-model 的元素可以使用 2 路绑定，否则需要手动同步数据。检查ngModelController 文档和那里可用的示例。它应该服务于您的目的。

于 2013-10-22T06:21:42.680 回答