Передать атрибут директивы в связанный контроллер?

Question

У меня есть директива, которую я использую для того же фильтра поиска на нескольких страницах. Таким образом, директива будет использовать сервис и получить довольно здоровенный код. Из-за того, что я хочу, чтобы установить связь с контроллером, а не иметь контроллер внутри директивы, как это:

.directive('searchDirective', function($rootScope) { 
    return { 
     restrict: 'E', 
     templateUrl:'searchtemplate.html', 
     controller: 'searchCtrl', 
     controllerAs: 'search' 
    }; 
}); 

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

В любом случае, вот что я не знаю, как это сделать. Моя директива выглядит следующим образом:

<search-directive filter="foo"/> 

Как передать в значении атрибута фильтра, так что я могу получить доступ к нему в моем контроллере, используя $ scope.filter или this.filter?

Если бы я использовал изолированный объем, это было бы просто. Если бы у меня был контроллер на той же странице, я мог бы использовать $ attrs. Но поскольку я использую контроллер из другого места и не хочу изолированную область, я не уверен, как получить значения attrs в контроллере.

Любые предложения?

Answer 1

Как насчет использования функции связи и передачи значения в область?

return { 
     restrict: 'E', 
     templateUrl:'searchtemplate.html', 
     controller: 'searchCtrl', 
     controllerAs: 'search', 
     link: function (scope, element, attr) { 
      scope.filter = attr.filter; 
     } 
    }; 

Answer 2

searchDirective.js

angular 
    .module('searchDirective', []).controller('SearchCtrl', SearchCtrl) 
    .directive('SearchDirective', directive); 

function directive() { 
    var directive = { 
     templateUrl:'searchtemplate.html', 
     restrict: "E", 
     replace: true, 
     bindToController: true, 
     controller: 'searchCtrl as search', 
     link: link, 
     scope: { filter:'=' } // <-- like so here 
    }; 
    return directive; 
    function link(scope, element, attrs) {} 
} 

SearchCtrl.$inject = [ 
    '$scope', 
    '$filter']; 

function SearchCtrl(
    $scope, 
    $filter) { 

    /** Init SearchCtrl scope */ 
    /** ----------------------------------------------------------------- */ 
    var vs = $scope; 
    // .... 

Кроме того, я настоятельно рекомендую проверить это AngularJS стиль руководства, как вы пишете директиву выше, как я использую, чтобы сделать это тоже. Джон Папа показывает, каким-то образом более эффективные способы: https://github.com/johnpapa/angular-styleguide

директивы: https://github.com/johnpapa/angular-styleguide#directives

контроллеры: https://github.com/johnpapa/angular-styleguide#controllers

Answer 3

Флип значения bindToController и scope вокруг.

{ 
    .... 
    scope: true, 
    bindToController: { filter:'=' } 
    ... 
} 

Я просто ударил тот же вопрос в минувшие выходные, и сделал простой полный пример здесь: bindToController Not Working? Here’s the right way to use it! (Angular 1.4+)