javascript - jQuery does not find element with ng-repeat -


i have view 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> 

i want call jquery('.log-btn--graph') after view rendered.

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); }); 

but gives b 0 , a 0.

after view rendered, can manually $('.log-btn--graph').length 5 in console.

so guess when call @ b , a, view not rendered yet. then, should put calling of $('.log-btn--graph').length make sure it's 5?

as have $watch in controller method. so, instead of looking dom nodes have watch on collection:

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); }); 

i mention have invalid markup, li elements should direct children of 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>  

above can see there 2 changes: (1): added <ul> , (2): added attribute data-button. can done:

(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 div attribute 'data-button' so:                elem.button();                // angular.element(elem).button(); // jqlite                // $(elem).button();            }         };    });  })(); 

Comments

Popular posts from this blog

Hatching array of circles in AutoCAD using c# -

ios - UITEXTFIELD InputView Uipicker not working in swift -

Python Pig Latin Translator -