0

I can't get two-way-data-binding to work in an Angular js ng-repeat. I have an ng-controller specified on the same element that has the ng-repeat specified - I just learnt that by doing this, I can get a hold of each item that is being iterated over by ng-repeat. Here is the 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>

And here is the ItemController:

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

And the OtherController:

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

When I hover the mouse over the #hoverMe-div - the caption-div is added correctly. But when I input some text in the paragraph and then move the mouse away from the #hoveMe-div, the $scope.image-variables caption value is not updated in the saveCaption-method. I understand I'm missing something. But what is it?

4

2 に答える 2

0

contenteditable でコンテンツを編集していて、モデルが更新pされることを期待していると思います。image.captionそれを機能させるには、2 ウェイバインディングをセットアップする必要があります。

ng-model をサポートする要素には 2 ウェイ バインディングを使用できます。それ以外の場合は、データを手動で同期する必要があります。ngModelController そこにあるドキュメントとサンプルを確認してください。それはあなたの目的に役立つはずです。

于 2013-10-22T06:21:42.680 に答える