Взять длину length коллекции после работы директивы ng-repeat

439

24 ноября 2016, 10:22

Здравствуйте! Вот такая вот заминка получается, директива ng-repeat выводит в список

angular.module("NameApp").controller("MainController", ['$scope', '$http', 'httpService',
  function MainController($scope, $http, httpService) {
    $http.post('model/get_images.php').then(function(response) {
      $scope.images = response.data;
    });
  }
]);

Вот директива

angular.module('HelpApp').directive('sliderShow', function sliderShow() {
  return {
    restrict: 'A',
    template: "<ul id='ul'><li ng-repeat='img in images'><img ng-src='img/{{img.src}}' alt='{{img.title}}'></li></ul>",
    link: function link(scope, element, attr) {
    }
  }
});

Нужно взять количество li.
Как я только не пытался это сделать, но результат всегда length = 0 Если просто написать список из нескольких li,то всё работает, а если использовать директиву для вывода, то результат равен 0.

<div class="slider">
  <ul>
    <li>картинка</li>
    <li>картинка</li>
    <li>картинка</li>
    <li>картинка</li>
    <li>картинка</li>
  </ul>
  <span>кружок</span>
  <span>кружок</span>
  <span>кружок</span>
  <span>кружок</span>
  <span>кружок</span>
</div>

Answer 1

В данном случае проблема решается редактированием шаблона. Круги тоже должны рисоваться с помощью ng-repeat.

angular.module("app", []).controller("MainController", ['$scope', '$timeout', 
  function MainController($scope, $timeout) { 
    $timeout(function() { 
      $scope.images = [1, 2, 3, 4, 5]; 
    }, 2000); 
 
  } 
]); 
 
angular.module('app').directive('sliderShow', function sliderShow() { 
  return { 
    restrict: 'A', 
    template: "<ul id='ul'><li ng-repeat='img in images'>картинка{{$index}}</li></ul><span ng-repeat='img in images'>кружок{{$index}}</span>", 
    link: function link(scope, element, attr) { 
 
    } 
  } 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js"></script> 
<div ng-app="app" ng-controller="MainController"> 
  <div slider-show>Loading...</div> 
</div>