为什么 jquery .data() 方法不获取更新值？

Question

我使用文件夹和子文件夹实现了某种文件面板。

从 Chrome 开发者工具中我可以看到 ui.item.sortable.droptarget 具有 parent-folder-id == 2 的 data 属性，但是当我尝试在代码中访问它时（通过 jquery data 方法）它 returns 10（我最近所在的另一个文件夹的父级的值）。为什么它没有得到更新？当我移动到另一个文件夹时 - vm.parentId 的新值是根据该文件夹的服务器值分配的。 DOM 更新正确...

<ul ui-sortable="vm.sortableOptions"
        ng-model="vm.cache.items"
        data-parent-folder-id="{{vm.parentId}}">

稍后添加：即使我将 .data() getter 更新为 ui.item.sortable.droptarget.data("parentFolderId") 它仍然 returns 10

更新 2：添加了 plunker 演示： http://plnkr.co/edit/14XfBOTFuJZ0oSy2ozqh?p=preview

<html ng-app="plunker">

  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <div class="xxx" data-parent="{{parentId}}"></div>
    <button ng-click="getParentId()">Get Parent Id</button>
    <br>
    <button ng-click="setParentId(15)">Set Parent Id to 15</button>
    <br>
    <button ng-click="getParentId()">Get Parent Id</button>
    <br>
    {{parentId}}
  </body>

</html>

app.js

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope, $element) {

  activate();

  function activate() {
    $scope.parentId = 10;
  }

  $scope.setParentId = function(number) {
    $scope.parentId = number;
  }

  $scope.getParentId = function() {
    $scope.parentId = $($element).find('.xxx').data('parent');
  }

});

当您按以下顺序单击按钮时：Set - Get - data 值成功更新。但是，当您单击另一个序列时：Get - Set - Get - 出现与我之前的代码相同的问题 - 在获取值时用新值更新值后 - 旧值 returns.

Answer 1

在 angularJs 中，您真的不需要做所有 jQuery 的事情，因为模型会立即绑定到 html 元素。

实际上，有了 angularJs，您甚至根本不需要 jQuery。

您不必使用 getParentId 获取属性的值，因为它已经显示在您的 {{parentId}}.

中

属性的作用域在您的控制器中 MainCtrl。

要了解绑定系统的真正工作原理，您可以玩这个 plunker。

如您所见，由于数据绑定，更改文本框中的值会更改 {{parentId}} 的值。

这就实现了using ng-model="parentId"

Answer 2

这是受此 SO 问题启发的解决方案： get wrong value in data attribute jquery

ui.item.sortable.droptarget.attr("data-parent-folder-id")

基本上是令人讨厌的 jQuery 所做的 - 它缓存数据值，然后只是 returns 旧的...所以一个解决方案是不使用 data 方法:)

这是 .data() 的记录行为： http://api.jquery.com/data/#data-html5

The data- attributes are pulled in the first time the data property is accessed and then are no longer accessed or mutated (all data values are then stored internally in jQuery).

为什么 jquery .data() 方法不获取更新值？

Why jquery .data() method does not fetch updated value?

jquery

jquery-ui-sortable

angularjs

angular-ui-sortable