我目前在我的网站上运行类似的东西。然而，我没有将我的搜索包装到一个指令中，因为它是它自己的页面。
对于我的设置方式，我有一个搜索页面site.com/search（例如，这将是您的登录页面）该页面有自己的 controller/view SearchController。在同一页面上有一个单独的容器，它基本上可以列出数组内的项目。最后，整个页面都有一个ApplicationController.
现在，SearchControllerandApplicationController显然是分开的，因此不能访问彼此的属性或方法。然而，他们可以做的是共享工厂/服务或广播信息。为简单起见，我们将让他们共享一个名为SearchService.
如果您仍然希望使用指令，您可以轻松地将其SearchController转换为指令并为自己使用相同的概念。
此处的基本 Plunkr 示例
搜索服务
将SearchService包含有用的搜索属性和方法，但您现在需要的只是一个Array包含搜索结果列表的简单内容。
myApp.factory('SearchService', function() {
var SearchService;
SearchService = {};
// The array that will contain search results
SearchService.arrSearchResults = [];
return SearchService;
}
);
应用控制器
范围将ApplicationController有一个引用，SearchService以便您可以使用ng-repeat并列出搜索结果的实际内容。
myApp.controller('ApplicationController', [
'$scope', 'SearchService', function($scope, SearchService) {
// Create a reference to the SearchService and add it to the
// $scope so it will be available on the page
$scope.searchService = SearchService;
}
]);
搜索控制器
范围也将SearchController有一个引用，SearchService以便它可以修改SearchService.arrSearchResults数组，从而改变将在页面上显示的内容。它还将包含与表单交互的方法。
它还会在执行搜索时更改 URL 位置。
myApp.controller('SearchController', ['$scope', 'SearchService', '$http', '$location', function($scope, SearchService, $http, $location) {
// Your search input
$scope.blab = "";
// Your search function
$scope.search = function() {
// Make sure blab has content (always good to double check)
if($scope.blab != "") {
// Alter URL to show new request
$location.search('q', $scope.blab);
// Make a GET request to your URL that will
// return data for you to populate
$http.get('/someUrl').
success(function(data, status, headers, config) {
// this callback will be called asynchronously
// when the response is available
alert("Search results found!");
// Assuming the data returned is a list of items
// or object items
// (i.e. [ "Search Result1", "Search Result2", ... ]
SearchService.arrSearchResults = data;
}).
error(function(data, status, headers, config) {
// called asynchronously if an error occurs
// or server returns response with an error status.
alert("Something failed! No results found!");
// Empty the array of search results
// to show no results
SearchService.arrSearchResults = [];
});
};
}]);
这页纸
<!doctype html>
<head>
<title>Search Example Page</title>
<!-- Insert Angular.JS source files here -->
</head>
<body ng-controller="ApplicationController" ng-app="myApp">
<!-- ngView -->
<div role="main" data-ng-view>
</div>
<!-- Search Results -->
<div ng-repeat="searchItem in searchService.arrSearchResults">
<p style="border-bottom: 2px solid #000">Search Result: <br/>{{searchItem}}</p>
</div>
</body>
</html>
标签
要切换搜索结果的类型（网络、图像等），您可以在其中创建一个变量SearchService来控制搜索的状态，从而控制要运行的搜索类型。
SearchService.typeOfSearch = "web";这会将状态设置为web，因此可以在页面和应用程序中进行交互。
然后，您可以ng-repeat在整个页面中显示各种不同状态的结果：
<!-- Search Results - Web -->
<div ng-if="searchService.typeOfSearch='web'" ng-repeat="searchItem in searchService.arrSearchResults">
<p style="border-bottom: 2px solid blue">Search Result: <br/>{{searchItem}}</p>
</div>
<!-- Search Results - Image -->
<div ng-if="searchService.typeOfSearch='image'" ng-repeat="searchItem in searchService.arrSearchResults">
<p style="border-bottom: 2px solid red">Search Result: <br/>{{searchItem}}</p>
</div>
我已经更新了 Plunkr 来演示。