问题

Question

我是Angular.js的新手，并尝试按照几个教程学习如何在contenteditable中双向绑定ng-repeat元素。

我正在使用共享＆＃39;商店＆＃39;控制器之间，例如

  pushupsApp.factory('grids', function () {
    return [
      ...
      {
        'id': 1409875200000, // 2014-09-05
        'sets': [
          5,
          10,
          15,
          20,
          25,
          30
        ]
      },
      {
        'id': 1409912060233, // 2014-09-05 11:14
        'sets': [
          5,
          10,
          15,
          20,
          25,
          30
        ]
      }
    ];
  });

  pushupsApp.controller('indexController', function ($scope, grids) {
    $scope.grids = grids;
  });

这看起来效果很好;如果我在一个控制器中更改$scope.grids，那么这个更改在所有其他控制器中都是持久的，直到我刷新页面为止。

关注this教程和Angular.js docs中的示例，我有以下控制器和指令：

  pushupsApp.controller('gridController',
    function ($scope, $routeParams, $filter, grids) {
      var now = new Date(Date.now());

      $scope.date = $filter('date')(now, 'yyyy-MM-dd');
      $scope.grids = $filter('filter')(grids, {'id':$scope.date},
        function (actual, expected) {
          return angular.equals($filter('date')(actual, 'yyyy-MM-dd'),
            $filter('date')(expected, 'yyyy-MM-dd'));
        });
  }).directive('contenteditable', function () {
    return {
      restrict: 'A',
      require: 'ngModel',
      link: function (scope, element, attributes, ngModel) {
        ngModel.$render = function () {
          element.html(ngModel.$viewValue || '');
        };

        element.bind('keyup', function () {
          scope.$apply(function () {
            ngModel.$setViewValue(element.html);
          });
        });
        }
      };
    });

问题

我的目的是当我在contenteditable中修改ng-repeat个元素时，$scope.grids也会更新，在keyup事件触发后镜像编辑。

$scope.grids不会更新。我试图研究自己可能会发生什么，但由于我对Angular.js这么新，我老实说不知道我应该寻找什么！我发现的一切都表明我当前的代码应该有效。

为了完整起见，我也有以下模板：

<script type="text/ng-template" id="grid.html">
  <p>{{date}}</p>
  <ul>
    <li ng-repeat="grid in grids">
      <p ng-if="grids.length > 1">{{grid.id | date:'shortTime'}}</p>
      <ul>
        <li contenteditable="" ng-model="grids" ng-repeat="set in grid.sets">
          {{set}}
        </li>
      </ul>
    </li>
  </ul>
</script>

最终，我的商店＆＃39;将是持久的，但是现在我很高兴它只能是每个会话。

对于我的Angular.js代码以及可能出现的问题，我们非常感谢任何帮助以及任何其他指示！

感谢您的帮助！乔恩

这可能会帮助？！

我注意到，当我将模板中的ng-model属性更改为grid.sets时，keyup事件会触发$scope.grids更新。但是，整个列表集将从DOM和$scope.grids中删除。这里可能会发生一些可能有助于解决问题的事情;这里有希望！

Answer 1

根据我的发现（参见此可能帮助），我突然非常接近解决方案！

当从$scope.grids删除整个数据块时，我现在知道我可以将该块缩小到contenteditable元素以及＆＃39;存储中的相应数据块。

将ng-template属性更改为grid.sets[$index]就是这样做的。

事实证明该元素正在从DOM中删除，因为我在这里缺少括号：

          scope.$apply(function () {
            // ngModel.$setViewValue(element.html);
            ngModel.$setViewValue(element.html());
          });

那只是粗心大意。每次往返后contenteditable元素都会丢失focus，因此我将事件更改为blur。{/ p>

问题，解决了： - ）

我希望这有帮助，Jon

当使用Angular.js更改contenteditable Elements时更新$ scope

问题

这可能会帮助？！

1 个答案:

问题，解决了： - ）