0

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

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

Angular 有 jQuery data()支持。

所以，我想将数据附加到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..
4

1 回答 1

2

首先，如果您尝试将某个第三方库与 Angular 集成，那可能没问题，但现在您正在生成带有 Angular 的 DOM 并将数据嵌入到 DOM 中。这很奇怪。

其次，您的test指令模板使用ngRepeat，它创建了隔离范围，您将无法以li声明方式访问项目。您将不得不使用 DOM 遍历，这也不是非常有角度的方式。

第三，您的视图应该通过 angulars 双向绑定绑定到模型。不要试图在此之上模拟相反的行为。要么你不应该使用角度，要么你应该改变你解决问题的方法，因为否则开发和维护会很痛苦。

如果您能描述您想要实现的目标以及为什么在data. 现在最简单的解决方案是放弃test指令并将其重写为：

控制器模板：

<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属性中。

于 2013-09-17T12:32:52.343 回答