angular.js - angular directive gets elements in directive template

Question

The command template is as follows:

The compiled structure is as follows:

Now I want to get each compiled a element. I use querySelector to get it, but I can't get it. Maybe it doesn't support compiled elements, so I want to ask you what can you do? Thank you

Answer 1

It seems messy. Please describe the functions you need to implement. It may be possible without instructions. Now you come up with a bunch of browser-generated elements, which are not readable, and people don’t know what you want to do, so it’s hard to answer you. When asking questions, first say that you want to implement the description function, and then your code, which is your idea. You can post your results at the end, but it's not necessary.

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;
        }