javascript - Calling directive inside a function in AngularJS -
i have directive called "drill-down" want call inside function 1 below dont know how this
$scope.drilldown = function() { code... if(success == 200) { call directive here } }
now use directive in view this:
<tr ng-repeat="d in data" class="child"> <td ng-click="drilldown()" drill-down></td> <td>d.name</td> <td>d.lastname</td> </tr>
some great!
directive code
angular.module('headline.drilldown',[]) .directive('drilldown',drilldown); function drilldown() { var directive = { restrict: 'a', link: link }; return directive; function link(scope,element) { var table = $('.categories-table'); table.each(function() { var $table = $(this); $table.find('.parent').each(function(){ if($(this).nextuntil('.parent', ".child").length >= 0){ $(this).children('td:first').html('+'); } }); $table.find('.child').each(function(){ if($(this).nextuntil('.child', ".grandson").length >= 0){ // $(this).children('td:first').html('+'); } }); var $childrows = $table.find('tbody tr').not('.parent').hide(); $table.find('button.hide').click(function() { $childrows.hide(); }); }); element.on('click',function(){ if($(this).parent().hasclass('parent') === true) { console.log("----parent"); if ($(this).text() === "+") $(this).text("-") else $(this).text("+"); $(this).parent().nextuntil('.parent', ".child").fadetoggle("fast", "linear"); $(this).parent().nextuntil('.parent', ".grandson").hide("fast"); $(this).parent().nextuntil('.parent', ".child").each(function(){ if($(this).children('td:first').text() === '-') $(this).children('td:first').text('+'); }); } else if($(this).parent().hasclass('child') === true) { console.log("----child"); if ($(this).text() === "+") $(this).text("-") else $(this).text("+"); $(this).parent().nextuntil('.child', ".grandson").fadetoggle("fast", "linear"); } }); } }
angular.module('myapp',[]) .controller('myctrl', function($scope, $timeout){ $scope.things = [ { label:"thing 1", details: "here's details", subcategories: [ {label:"sub thing 1"}, {label:"sub thing 2"}, {label:"sub thing 3"} ] }, {label:"thing 2", details: "here's other details"}, {label:"thing 3", details: "here's details again"}, {label:"thing 4", details: "alright idea"}, ] $scope.someasyncthinghappens = function(){ $timeout(function(){ $scope.things[2].expanded = true; }, 500) } });
.btn { cursor:pointer; padding: 5px; background-color: red; border-radius:5px; }
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script> <div ng-app="myapp" ng-controller="myctrl"> <table> <tr ng-repeat-start="thing in things" ng-click="thing.expanded = !thing.expanded"> <td> <div class="btn" ng-if="!thing.expanded">+</div> <div class="btn" ng-if="thing.expanded">-</div> </td> <td>{{thing.label}} <span ng-if="thing.expanded">{{thing.details}}</span></td> </tr> <tr ng-repeat-end ng-repeat="subthing in thing.subcategories" ng-if="thing.expanded"> <td>x</td><td>{{subthing.label}}</td> </tr> </table> <button class="btn" ng-click="someasyncthinghappens()">simulate async</button> </div>
Comments
Post a Comment