javascript - jQuery 找不到带有 ng-repeat 的元素

Question

我有一个关于 ng-repeat 的 View :

<div ng-controller="LogBtnCtrl">
  <li class="item log-btn" ng-repeat="logItem in logBtns">
    <div class="log-btn--graph">5,3,9,6,5,9,7</div>
  </li>
</div>

我想在 View 渲染后调用jQuery('.log-btn--graph')。

angular.controller('LogBtnCtrl', function($scope, TodayLogBtns) {
  $scope.logBtns = [0,1,2,3,4];

  $scope.$watch('logBtns',
    function() {
      console.log('a', $('.log-btn--graph').length);
    });

  console.log('b', $('.log-btn--graph').length);
});

但它给出了 b 0 和 a 0。

渲染 View 后，我可以在控制台中手动获取 $('.log-btn--graph').length 为 5。

所以我猜当我调用 b 和 a 时， View 尚未渲染。那么，我应该在哪里调用 $('.log-btn--graph').length 以确保它是 5？

Answer 1

因为你有 $watch在你的 Controller 方法中。因此，不要寻找 DOM 节点，而是监视集合:

angular.controller('LogBtnCtrl', function($scope, TodayLogBtns) {
  $scope.logBtns = [0,1,2,3,4];

  $scope.$watch('logBtns',
    function() {
      console.log('a', $scope.logBtns.length);
    });

  console.log('b', $scope.logBtns.length);
});

<小时/>

我要提到的是，您的标记无效，li元素应该是 ul 的直接子元素:

<div ng-controller="LogBtnCtrl">
  <ul>
      <li class="item log-btn" ng-repeat="logItem in logBtns">
        <div data-button class="log-btn--graph">5,3,9,6,5,9,7</div>
     </li>
  </ul>
</div> 

上面可以看到有两处变化:(1):添加了<ul> (2):添加属性data-button 。现在可以这样做:

(function(){
   var app = angular.module('theApp',[]);
   app.controller('LogBtnCtrl', function($scope, TodayLogBtns) {
       $scope.logBtns = [0,1,2,3,4];

       $scope.$watch('logBtns', function() {
          console.log('a', $scope.logBtns.length);
       });

       console.log('b', $scope.logBtns.length);
   });

   app.directive('button', function(){
        return {
           restrict:'A',
           link:function(scope, elem, attrs){
               // here elem is div with attribute 'data-button' so:
               elem.button();
               // angular.element(elem).button(); // with jqLite
               // $(elem).button();
           }
        };
   });

})();