Question

我创建了名为 displayId 的自定义指令。使用ng-repeat渲染的custom-directive和绑定来自ng-repeat数据的id。遗憾的是，无法在自定义指令中获取元素的id。

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

在下面找到问题可重复的plnkr。

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

任何人请建议我解决。

Answer 1

使用compile - ＆gt; 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

你可以在指令的指令使用链接函数中传递范围此

<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值？

2 个答案: