javascript - Angularjs/Jquery 数据()

Question

如何以声明方式将任意数据附加到 html 元素并检索它。

请查看代码。 http://plnkr.co/edit/sePv7Y?p=preview

Angular 有 jQuery data() support .

因此，我想将数据附加到模板中的每个 li 元素(例如 _data = node )，然后使用

检索它

var li = elm[0]....
console.log('li-', li.data('_data'))
li - {id:1}

代码:

'use strict';

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

app.controller('MainCtrl', function ($scope) {
   $scope.data = [
                    {id:1}, {id:2}, {id:3}

        ];
});


app.directive('test', function ($timeout) {
  return {
      template: '<li class="ch" ng-repeat="node in data">' +
                '<span class="span2">' + 'id - {{node.id}}' + '</span>' +
                '</li>',
            restrict: 'A',
            link: function (scope, elm, attrs) {
                console.log(elm[0].children);
            }
    };
});

编辑:

用我喜欢的设置数据的方式更新了代码。

 template: '<li class="ch" ng-repeat="node in data"  data-node="node">' +

现在无法正确选择 li 元素来查看它是否正常工作尝试过，

elm[0].children[0].data()
elm.children[0].data()
etc..

Answer 1

首先，如果您尝试将某些第三方库与 Angular 集成，那么<​​em>可能没问题，但现在您正在使用 Angular 生成 DOM 并在 DOM 中嵌入数据。这很奇怪。

其次，您的 test 指令模板使用 ngRepeat，它会创建隔离范围，并且您将无法以声明方式访问 li 项。您必须使用 DOM 遍历，这也不是很 Angular 方式。

第三，您的 View 应该通过 Angular 双向绑定(bind)绑定(bind)到模型。除此之外，不要尝试模拟相反的行为。要么你不应该使用 Angular，要么你应该改变解决问题的方法，因为否则开发和维护会很痛苦。

如果您能描述您想要实现的目标以及为什么您在data中需要该模型，我将提供一个真正的答案。现在最简单的解决方案是放弃 test 指令并重写它，如下所示:

Controller 的模板:

<ul>
  <li ng-repeat="node in data" model-in-data="node">
    <span class="span2">id - {{node.id}}</span>
  </li>
</ul>

指令modelInData

.directive('modelInData', function($parse) {
   return {
     restrict: 'A',
     link: function($scope, $element, $attrs) {
       var model = $parse($attrs.modelInData)($scope);
       $attrs.$set('data', model);
     }
   }
});

此处，每个 li 元素将其模型添加到 data 属性中。