angular中的$$hashkey踩坑

问题开始: $$hashkey是干什么的?
Angular内部添加的此功能,为了跟踪用户的更改,因此它才能知道何时需要更新DOM树。

<treecontrol class="tree-editctr" tree-model="data" options="treeOptions" on-node-toggle="query(node)"
selected-node="data.selectedNode[0]" on-node-selection="query(node)" expanded-nodes="data.expanded"></treecontrol>

问题来源:
使用treecontrol树组件循环数据,初始化渲染节点后,选中节点无法注入liSelected样式类;
排查原因:
选中节点select-node数据与父循环数据hashkey值不匹配,导致angular认为不是该节点,故无法注入样式类;
如何处理$$hashkey会带来的一些问题?

  • 方式一:
    如果是使用ng-repeat循环数据,建议在ng-repeat中使用“ track by”:
    举例:ng-repeat=“item in items track by {$index}”
    好处:
    1、如果您使用“ track by”,Angular不会在数组中的对象上添加“ hashKey”属性。
    2、还可以获得性能上的好处,如果数组中的某些内容发生更改,angular不会为ng-repeat重新创建整个DOM结构,而是为数组中已更改的值重新创建DOM的一部分结构。
  • 方式二:
    在需要删除之前,使用angular.toJson(obj)或angular.copy(obj)在代码中删除hashKey。但是该做法吸引力较小,因为它不会将$$hashkey从所有Angular对象中删除,而是仅从调用它的对象中删除。
    举例:
    $scope.NewObject = JSON.parse(angular.toJson(scope.Object))
    $scope.Object -引用要在其上执行操作的对象,即从中删除 hashKey
    $scope.NewObject -将修改后的原始对象分配给新对象,以便可以根据需要使用
  • 方式三:
    如果只是用来显示数据,也可以使用使用双冒号::,一次性绑定数据功能来防止其更新。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值