的jQuery没有找到与NG-repeat元素

我有ng-repeat一个观点：的jQuery没有找到与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？

来源

2016-01-28 Ovilia

这应该在DDO做，你有一个合法的标记...... :( – Jai

DOM代码在控制器不属于.....需要在指示。控制器在编译视图之前运行。什么是jQuery的？ – charlietfl

为什么不检查'$ scope.logBtns.length'？ – Jai

由于您的控制器方法中有一个$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(); 
      } 
     }; 
    }); 

})();

来源

2016-01-28 11:04:38 Jai

那么如何使用DOM元素调用jQuery？我需要类似'$（'。button'）。button（）'的东西。 – Ovilia

谢谢！它现在有效。 :) – Ovilia

$（'。log-btn - graph'）'会在每次实例触发时影响整个页面中的每个类。集合中的第一个将插件应用到它多次。更好地使用'elem.button（）' – charlietfl

使用jQuery和AngularJS在一起产生类似的非更新数据绑定的一些问题（阅读$消化文档，$应用等进一步的细节）。

一个更好的形式给出了是在控制器中直接使用的数据模型（$范围数据）（例如

console.log(logBtns.length)

来源

2016-01-28 11:28:56 Sebastian

你不需要手表任何的这个，如果你正在做的是改变个人重复中的元素

您使用了一个指令，因为它可以确保元素在操作代码运行之前退出，指令还允许您直接访问元素本身......当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>

来源

2016-01-28 11:49:11 charlietfl

的jQuery没有找到与NG-repeat元素

回答

相关问题