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 と統合しようとしているのがサードパーティのライブラリである場合、それは問題ないかもしれませんが、今は角度のある DOM を生成し、DOM にデータを埋め込んでいます。これは非常に奇妙です。

次に、testディレクティブ テンプレートで を使用します。これにより、Isolate スコープが作成され、アイテムに宣言的ngRepeatにアクセスできなくなります。liDOM traversal を使用する必要がありますが、これもあまりangular-way-ishではありません。

3 番目に、Angular の双方向バインディングによってビューをモデルにバインドする必要があります。その上で反対の行動をシミュレートしようとしないでください。angularを使用しないか、問題へのアプローチを変更する必要があります。そうしないと、開発と保守が面倒になるためです。

何を達成しようとしているのか、なぜそのモデルが で必要なのかを説明できれば、本当の答えを提供できます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 に答える