StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>Yes, you can (and should) move it to a directive. For the sake of clarity I'll include your old code here:</p> <pre><code> $('.userRow ').live('click', function(e) { $(this).find('span.userDetailRow.blueRow').show().animate({height:200},500); }); $('.closeDetails').live('click', function(e) { $(this).parent('span').animate({height:0}, 500).animate({height:0},500).hide(); e.stopPropagation(); }); </code></pre> <p>This (binding event listeners with jquery) is what people are chomping at the bit to describe as 'not the angular way.' Instead, you can use ng-click (which is just an inbuilt directive) to call javascript functions:</p> <pre><code><tr row ng-click="expandRow()" ng-repeat="user in users" class="item-in-list el userRow" animate="fadeIn"> <span class="userDetailRow blueRow" style="display:none;"><span close ng-click="closeDetails(); $event.stopPropagation()">x</span> </code></pre> <p>You can see here there are two custom attributes defined on these elements. These link to the directives below. These directives have custom functions defined in their link function which you can then call with ng-click (though note that this is putting these functions on the global scope).</p> <pre><code>.directive('close', function() { return { restrict: 'A', replace: false, link: function($scope, element, attrs) { $scope.closeDetails = function() { $(element).parent('span').animate({height:0}, 500).animate({height:0},500).hide(); } } } }) .directive('row', function() { return { restrict: 'A', replace: false, link: function($scope, element, attrs) { $scope.expandRow = function() { $(element).find('span.userDetailRow.blueRow').show().animate({height:200},500); } } } }); </code></pre> <p>jQuery is still being used to here to locate and modify the elements for the sake of simplicity, so you can see where your old logic has gone. However you should ideally change this to use angular's inbuilt animation functionality. (more info on how animation works in the new angular version: <a href="http://www.yearofmoo.com/2013/08/remastered-animation-in-angularjs-1-2.html" rel="nofollow">http://www.yearofmoo.com/2013/08/remastered-animation-in-angularjs-1-2.html</a>)</p> <p>Plunker here:</p> <p><a href="http://plnkr.co/edit/UMvYnx?p=preview" rel="nofollow">http://plnkr.co/edit/UMvYnx?p=preview</a></p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload