2014-11-16 2 views
1

Просто интересно, что является лучшим способом связи с контроллером на директивную функцию, у меня есть ng-click на одной из кнопок, но функция сидит в директиве, есть способ, которым я могу вызвать функцию внутри контроллера (которая находится в директиве). Я понимаю, что вы можете применять двойное связывание с областью действия, есть ли лучший способ сделать это?Каков наилучший способ вызова функции в директиве от контроллера?

Приветствие

app.controller('leadsListing', ['$scope', function($scope){ 
    $scope.filterresultcount = 0; 
    $scope.records = []; 
    $scope.filtertotal = ''; 

    $scope.$watch('filtertotal', function(){ 
     $scope.filterresultcount = parseInt($scope.filtertotal/20); 
    }); 

    $scope.moreFilterResult = function(){ 
     if($scope.filterresultcount > 0){ 
      $scope.filterresultcount--; 
     } 
     $scope.heyJoe(); // It's in diretive 
    }; 
    }]); 

app.directive('recordfilter', ['$http', 'filterService', function($http, filterService){ 
    return { 
     scope: { 
      names : '@names', 
      model : '@model', 
      records : '=records', 
      filtertotal : '=filtertotal', 
      filterresultcount : '=filterresultcount' 
     }, 
     restrict: 'A', 
     replace: true, 
     link: function($scope, iElm, iAttrs, controller) { 
      $scope.heyJoe() 
     } 
    } 
} 

ответ

2

Я считаю, что лучшим способ реализации такого рода контроллер -> директива связь заключается в использовании $ сферы $ радиопередачи от контроллера и $ объема $ на в регуляторе директивы../linking.

Контроллер:

app.controller('leadsListing', ['$scope', function($scope){ 
    // ... 

    $scope.moreFilterResult = function(){ 
     if($scope.filterresultcount > 0){ 
      $scope.filterresultcount--; 
     } 
     $scope.$broadcast('joeCalled'); 
    }; 
}]); 

Директива:

app.directive('recordfilter', ['$http', 'filterService', function($http, filterService){ 
    return { 
     scope: { 
      names : '@names', 
      model : '@model', 
      records : '=records', 
      filtertotal : '=filtertotal', 
      filterresultcount : '=filterresultcount' 
     }, 
     restrict: 'A', 
     replace: true, 
     link: function(scope, iElm, iAttrs, controller) { 
      scope.$on('joeCalled', function(){ 
       // Do something... 
      }); 
     }); 
    }; 
} 

Edit:

Создан рабочий пример этого метода: http://jsfiddle.net/9p3eyy5h/2/

+0

звучит благой мат, это лучше, чем при использовании сферы, у меня есть на голосовании и ждать, если есть лучшие ответы. – Bruce

+0

Я предполагаю, что если вы хотите сделать что-то ближе к тому, что вы просили, вы можете создать пустой объект в области контроллера, передать его директиве с использованием привязки данных «=» и приложить к ней функцию в директиве, которая позже может быть вызван контроллером: http://jsfiddle.net/9pm3zg5s/1/ Тем не менее, я бы посоветовал ему, поскольку он создает явную зависимость между контроллером и директивой, что приводит к ошибке, если директива отсутствует или изменяет поведение. –

+0

thumb up! спасибо за отличный ответ :) – Bruce

1

Вызов п unction непосредственно в директиве от контроллера может быть сделано путем помещения пустого объекта в область контроллера, привязки его к области действия директивы с помощью «=» и присоединения функции к ней в функции/контроллере ссылки, которая может быть позже вызываемый контроллером упаковки.

Контроллер:

app.controller('leadsListing', ['$scope', function($scope){ 
    // ... 

    $scope.directiveFuncs = {}; 
    $scope.moreFilterResult = function(){ 
     if($scope.filterresultcount > 0){ 
     $scope.filterresultcount--; 
     } 
    $scope.directiveFuncs.heyJoe(); 
    }; 
}]); 

Директива:

app.directive('recordfilter', ['$http', 'filterService', function($http, filterService){ 
    return { 
    scope: { 
     names : '@names', 
     model : '@model', 
     records : '=records', 
     filtertotal : '=filtertotal', 
     filterresultcount : '=filterresultcount', 

     // Binding to the controller's func obj 
     funcs: '=' 
     }, 
     restrict: 'A', 
     replace: true, 
     link: function(scope, iElm, iAttrs, controller) { 
     scope.funcs.heyJoe = function(){ 
      // Do something... 
     } 
    }); 
    }; 
} 

HTML:

<div ng-controller="leadsListing"> 
    <div recordfilter funcs="directiveFuncs"></div> 
</div> 

Я бы, однако советую использовать мой другой подход, поскольку он предотвращает прямую зависимость между контроллером и директива и, следовательно, более надежная, поэтому она не будет выдавать ошибку, если директива равна m исчисления или изменения.

Рабочий пример:
http://jsfiddle.net/9pm3zg5s/1

+0

Спасибо, что оба метода велики, я реализовал первый, но другой ppl может найти его обычным в определенной ситуации. – Bruce

Смежные вопросы