AngularJS

Question

で関数内の呼び出し指示、私は以下の一つとして、関数内で呼び出したいが、私は、私が使用して今、この

$scope.drillDown = function() { 

    some code... 

    if(success == 200) { 

     call the directive here  

    } 
} 

を行う方法を知らない「ドリルダウン」と呼ばれるディレクティブを持っていますそのような私の見解でその指示：

<tr ng-repeat="d in data" class="child"> 
    <td ng-click="drillDown()" drill-down></td> 
    <td>d.name</td> 
    <td>d.lastname</td> 
    </tr> 

いくつかの助けになるでしょう！

ディレクティブ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"); 
     } 
    }); 
} 

} 

Answer 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>