angular.js - angular指令获取指令模板中的元素

Question

指令模板如下：

编译后的结构如下：

现在我想获取编译后的各个a元素，我使用querySelector来获取，可是获取不到，也许它不支持编译后的元素，所以想请教大家有什么办法？谢谢

Answer 1

Nampaknya tidak kemas. Sila terangkan fungsi yang perlu anda laksanakan. Kini anda menghasilkan sekumpulan elemen yang dihasilkan oleh penyemak imbas, yang tidak boleh dibaca dan orang ramai tidak tahu apa yang anda mahu lakukan, jadi sukar untuk menjawab anda. Apabila bertanya soalan, mula-mula katakan bahawa anda ingin melaksanakan fungsi penerangan, dan kemudian kod anda, iaitu idea anda. Anda boleh menyiarkan hasil anda pada penghujungnya, tetapi ini tidak perlu.

Answer 2

angular.module('examplexxx', [])
  .controller('TabsCtrl', ['$scope', function($scope) {
    $scope.list = [{
      text: '1111'
    }, {
      text: '2222'
    }, {
      text: '3333'
    }];
  }])
  .directive('tabs', function() {
    return {
      scope: {
        tablist: '='
      },
      template: '<ul><li ng-repeat="tab in tablist" data-index="{{$index}}">{{tab.text}}</li><li class="bottom-line"></li></ul>',
      link: function(scope, ele, attrs) {
        var $ul = angular.element(ele).find('ul'),
          btline = $ul.children().eq(-1);

        $ul.on('click', function(e) {
          var i = angular.element(e.target)[0].getAttribute('data-index');
          if (i < 0 || i > 2) return;
          btline.css('left', i * 100 + 'px');
        })
      }
    }
  });

<p ng-app="examplexxx">
    <p ng-controller="TabsCtrl">
          <p  tabs tablist="list"></p>
    </p>
</p>

        ul{
            list-style: none;
            position: relative;
            padding: 0;
            display: inline-block;
        }
        ul:after{
            content: '';
            display: block;
            clear: both;
        }
        li{
            float: left;
            width: 100px;
            line-height: 40px;
            font-size: 15px;
            text-align: center;
            cursor: pointer;
        }
        li:nth-child(2){
            border-left: 1px solid  #999;
            border-right: 1px solid  #999;
        }
        .bottom-line{
            position: absolute;
            bottom: 0;
            left: 0;
            height: 2px;
            background: red;
            width: 100px;
            overflow: hidden;
            transition: left 0.3s;
        }