Calling directive inside a function in AngularJS

Question

I have a directive called "drill-down" that I want to call inside a function as the one below but I dont know how to do this

$scope.drillDown = function() {

   some code...

   if(success == 200) {

      call the directive here    

   }
}

Now I use that directive in my view like 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 help will be 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");
        }
    });
}

}

Hi and thanks for your time, I update my question with the directive code. — kennechu
– kennechu, Commented May 25, 2016 at 3:46
Not clear what the purpose of the directive is. Can you explain what this directive does and why you aren't just using existing directives to achieve what you want? Also like someone mentioned when this was first posted you would pass some variable into the directive that it would watch or observe and when that property's value changes you would do whatever work in the directive. — shaunhusain
– shaunhusain, Commented May 25, 2016 at 3:57
@shaunhusain Hi, this directive help me to expand and collapse rows in an html table, Imagine I have five records, each record could have "child" records, its like doing drill-down on the "parent" records, so I made it using jquery cause is the way I knew, so someone told me to use a directive so I put my jquery code in the directive. — kennechu
– kennechu, Commented May 25, 2016 at 4:02
Gotcha, yeah doing DOM manipulation in directives is typically the way to go but if you just want collapsible rows you can just use an ng-click and ng-if or ng-show/ng-hide combination... let me try a sample and tell me what's wrong from there. — shaunhusain
– shaunhusain, Commented May 25, 2016 at 4:22

shaunhusain · Accepted Answer · 2016-05-25 04:52:51Z

1

angular.module('myApp',[])
  .controller('MyCtrl', function($scope, $timeout){
     $scope.things = [
       {
         label:"thing 1",
         details: "here's some details",
         subcategories: [
           {label:"sub thing 1"},
           {label:"sub thing 2"},
           {label:"sub thing 3"}
         ]
       },
       {label:"thing 2", details: "here's some other details"},
       {label:"thing 3", details: "here's some details again"},
       {label:"thing 4", details: "alright we get the 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>

edited May 25, 2016 at 4:52

answered May 25, 2016 at 4:28

shaunhusain

19.7k4 gold badges41 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

kennechu Over a year ago

Thanks a lot for you help, I really appreciate it!

shaunhusain Over a year ago

No problem thanks for explaining the problem I can't read jQuery code :)

Collectives™ on Stack Overflow

Calling directive inside a function in AngularJS

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related