Question

我有一个ng-repeat的视图：

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

我希望在呈现视图后调用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。

渲染视图后，我可以在控制台中手动将$('.log-btn--graph').length设为5。

所以我想当我在b和a打电话时，视图还没有呈现。那么，我应该在哪里调用$('.log-btn--graph').length以确保它是5？

Answer 1

因为控制器方法中有$watch。因此，不是寻找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();
           }
        };
   });

})();

Answer 2

一起使用JQuery和AngularJS会产生一些问题，比如非更新数据绑定（请阅读$ digest上的doc，$ apply等等，以获取更多详细信息）。

更好的方法是直接在控制器中使用数据模型（$ scope数据）（例如

console.log(logBtns.length)

Answer 3

如果你所做的只是修改重复中的单个元素，你不需要手表。

您使用指令，因为它可以确保元素在运行操作代码之前退出。指令还允许您直接访问元素本身...当jQuery在页面中可用时，它将是一个jQuery对象。

app.directive('jq-button', function(){
    return {           
       link:function(scope, elem, attrs){
           // elem is a jQuery object
           elem.button();
       }
    };
});

HTML

<div class="log-btn--graph" jq-button>5,3,9,6,5,9,7</div>

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

3 个答案: