angulaire.js - la directive angulaire obtient des éléments dans le modèle de directive

Question

Le modèle de commande est le suivant :

La structure compilée est la suivante :

Maintenant, je veux obtenir chaque élément a compilé. J'utilise querySelector pour l'obtenir, mais je n'arrive pas à l'obtenir. Peut-être qu'il ne prend pas en charge les éléments compilés, alors je veux vous demander ce que vous pouvez. faire? Merci

Answer 1

Cela semble compliqué. Veuillez décrire les fonctions que vous devez mettre en œuvre. Cela peut être possible sans instructions. Maintenant, vous obtenez un tas d’éléments générés par le navigateur, qui ne sont pas lisibles, et les gens ne savent pas ce que vous voulez faire, il est donc difficile de vous répondre. Lorsque vous posez des questions, dites d'abord que vous souhaitez implémenter la fonction de description, puis votre code, qui est votre idée. Vous pouvez publier vos résultats à la fin, mais ce n'est pas obligatoire.

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