Могу ли я потребовать смежную директиву?

У меня есть два указателя на уровне элемента, окно поиска и результаты поиска. Моя наценка что-то вроде этого (упрощенно):Могу ли я потребовать смежную директиву?

<catalogue-search-box query="{{query}}"> 
<catalogue-search-results></catalogue-search-results>

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

источник

2013-09-23 Dan

Посмотрите на 'siblingDirectiveName' в руководстве для разработчиков директив HTTP:. //docs.angularjs. org/guide/directive, помогает ли это – Chandermani

@Chandermani Нет, это касается директив в одном элементе (т. е. директивы сиблинга не являются директивами в элементах брата). –

не могли бы вы опубликовать скрипку демонстрации plunker, пожалуйста, –

После того, как вы прочтете комментарии, я сделаю это: используйте объект, чтобы сохранить все ваше состояние и передать его обеим директивам. Demo plunker

HTML

<body ng-controller="MySearchController"> 
    <search-box search="mySearch"></search-box> 
    <search-results search="mySearch"></search-results> 
</body>

var search = angular.module('search', []); 

//simulated service 
search.service('Search', ['$timeout', '$q', function($timeout, $q) { 
    return { 
    findByQuery : function(query) { 
     var deferred = $q.defer(); 
     $timeout(function() { 
     deferred.resolve([query + ' result1', query + ' result2']); 
     console.log('resolved query ' + query); 
     }, 2000); 
     return deferred.promise; 
    } 
    }; 
}]); 

search.controller('MySearchController', ['$scope', function($scope) { 
    $scope.mySearch = { 
    query : '' 
    } 
}]); 

search.controller('SearchBoxCtrl', ['$scope', 'Search', function($scope, Search) { 
    $scope.execute = function(search) { 
    console.log(search); 
    if(search.query && search.query.length > 3 && !search.running) { 
     search.running = true; 
     search.promise = Search.findByQuery(search.query).then(function(val) { 
     search.results = val; 
     }); 
    } 
    }; 
}]); 

search.directive('searchBox', function(){ 
    return { 
    restrict: 'E', 
    scope : { 
     search : '=' 
    }, 
    controller: 'SearchBoxCtrl', 
    template : '<div ng-hide="search.results">Query: <input type="text" ng-model="search.query" ng-disabled="search.running"></input> <button ng-click="execute(search)" ng-disabled="search.running">Search</button></div>', 
    replace: 'true' 
    }; 
}); 

search.controller('SearchResultsCtrl', function(){ 

}); 

search.directive('searchResults', function(){ 
    return { 
    restrict: 'E', 
    scope : { 
     search : '=' 
    }, 
    controller: 'SearchResultsCtrl', 
    template : '<div ng-show="search.results"><div ng-repeat="result in search.results">{{result}}</div></div>', 
    replace: true, 
    link : function(scope, element, attrs, ctrl){ 
    } 
    }; 
});

PS:

Не используйте теги p в шаблонах директив в качестве корневого узла. Парсер html сообщает 2 узла, если у вас есть p дочерних узлов, а угловой - для одного корневого узла.
Вы можете дополнительно использовать обещание в контроллере зарегистрировать другие функции для выполнения, когда результаты приходят в

источник

2013-09-23 17:14:59

Спасибо. постскриптум теги p были только для демонстрационных целей, но спасибо за подсказку! – Dan

Один из способов я экспериментировал с так вопросом, имеющим какое-то директива контроллера т.е.

<catalogue-search> 
    <catalogue-search-box query="{{query}}"> 
    <catalogue-search-results></catalogue-search-results> 
</catalogue-search>

Затем я могу получить доступ к «директиве контроллера» это с помощью модификатора родителя (^) в моем требуется заявление. Каждая директива может затем разговаривать друг с другом через директиву контроллера.

Это кажется разумным или это слишком сложно?

источник

2013-09-23 14:43:55 Dan

Я бы спросил, что вам нужно для доступа в результатах поиска? Вместо интерполяции запроса попробуйте иметь общий объект, который вы можете передать обеим директивам. search = {query: ''} <каталог-search-box search = "search"><каталог-search-results search = "search"> –

Thanks Liviu. Директива результатов поиска отвечает за фактический поиск, который он делает, обратившись к поисковому сервису. Я хочу, чтобы результаты поиска отображали окно поиска, когда оно закончило поиск как часть обратного вызова, который я передаю службе поиска (чтобы я мог скрыть окно поиска). Я новичок в угловой, поэтому мой дизайн может быть испорчен. – Dan

Могу ли я потребовать смежную директиву?

ответ

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