无法在我的自定义指令中绑定 ng-repeat 值？

Question

我创建了名为 displayId 的自定义指令。使用 ng-repeat 从 ng-repeat 数据中呈现自定义指令和绑定 id。不幸的是，无法在自定义指令中获取元素的 ID。

    app.directive('displayId', function(){
          return {
                  restrict: 'EA',
                    compile: function(element){
                          alert(element.attr("id"));  //id displaying as op.id
                     }
         };
        });`

在下面找到可重现的问题。

https://plnkr.co/edit/3a8HBApCtbmYlGIfWyzM?p=preview

任何人请给我建议解决方案。

Answer 1

使用compile -> post

app.directive('displayId', function(){
    return {
      restrict: 'EA',
      compile: function(){

        return {
          pre: function ($scope, $elm, $attrs) {

          },
          post: function ($scope, $elm, $attrs, controllers) {
            console.log($attrs.id);
          }
        }

      }
    };
  });

Demo Plunker

Answer 2

You can pass scope in directive use link function of directive like this

<body ng-app="myApp" ng-controller="cntrl">
    <div ng-repeat="op in options">
        <p>{{op.id}}</p>
        <div displayid id={{op.id}} > </div>
    </div>    
<script>
var app = angular.module("myApp", []);

app.controller("cntrl",function($scope){

 $scope.options = [
    {'id' : 'Title1', 'label' : 'Zip code', 'type' : 'xxx' },
    {'id' : 'Title2', 'label' : 'MD', 'type' : 'title1'},
    {'id' : 'Title3', 'label' : 'DMS', 'type' : 'title2'}
];
})


app.directive('displayid', function(){
    return {
      restrict: 'EA',
      scope:{
        id:'@id'
      },
      link: function(scope,element,attrs){
        console.log(scope.id);
      }
    };
  });
</script>

</body>

Demo Plunker

无法在我的自定义指令中绑定 ng-repeat 值？

Not able to bind ng-repeat values in my custom directives?

angularjs

angularjs-directive

angularjs-ng-repeat