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

【问题标题】：jQuery does not find element with ng-repeatjQuery 找不到带有 ng-repeat 的元素
【发布时间】：2016-01-28 10:51:34
【问题描述】：

我对@987654321@有意见：

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

【问题讨论】：

这应该在 DDO 中完成并且您的标记无效......:(
dom 代码不属于控制器......需要在指令中。控制器在视图编译之前运行。 jQuery 是干什么用的？
你为什么不检查$scope.logBtns.length？
第二个@Jai 说的。你正在使用 Angular，所以使用 Angular 的方法
我查过了。 $scope.logBtns.length 是 5。@Jai

标签： javascript jquery angularjs angularjs-ng-repeat

【解决方案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();
           }
        };
   });

})();

【讨论】：

那么如何用DOM元素调用jQuery呢？我需要类似于$('.button').button() 的东西。
$('.log-btn--graph') 每次触发一个实例时都会影响整个页面中的每个类。集合中的第一个将多次应用插件。最好只使用elem.button()

【解决方案2】：

同时使用 JQuery 和 AngularJS 会产生一些问题，例如无法更新数据绑定（请阅读 $digest、$apply 等文档了解更多详细信息）。

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

console.log(logBtns.length)

【讨论】：

【解决方案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>

【讨论】：