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>

一些帮助会很棒！

指令代码

 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

＆＃13;

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)
       }
  });

＆＃13;

.btn {
  cursor:pointer;
  padding: 5px;
  background-color: red;
  border-radius:5px;
}

＆＃13;

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

＆＃13;

在AngularJS中的函数内调用指令

1 个答案: