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
Post a Comment