angular.js - arahan sudut mendapat elemen dalam templat arahan

Question

Templat arahan adalah seperti berikut:

Struktur yang disusun adalah seperti berikut:

Sekarang saya ingin mendapatkan setiap elemen a saya menggunakan querySelector untuk mendapatkannya, tetapi saya tidak boleh mendapatkannya. Mungkin ia tidak menyokong elemen yang disusun, jadi saya ingin bertanya kepada anda buat? Terima kasih

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