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