Ela*_*Ela 5 javascript angularjs angularjs-directive angularjs-ng-form
我正在编写一个UI智能几乎与Google完全一样的应用程序.我到达着陆页我有一个搜索框,在提交时会将您引导至结果页面.在这里,您可以使用相同的搜索框和其他指令来切换模式:例如.网站,图像.目前我有:
在着陆页上:form with action ="results.html",它传递url中的参数.
<form name="search" role="form" action="results.html">
<div class="input-group input-group-search">
<input type="text" class="form-control" ng-model="blab" name="q" required>
<span class="input-group-addon">
<button class="btn-search" ng-disabled="search.$invalid">
<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
</button>
</span>
<input type="hidden" name="mode" value="web"/>
</div>
</form>
结果我只是在输入上使用ng-submit ="search()"和ng-model.搜索框位于searchController中.
作为自定义指令执行此操作的正确方法是什么,具有以下行为:
我目前在我的网站上运行类似的东西.然而,我没有将我的搜索包装成指令,因为它是它自己的页面.
对于我如何设置,我有一个搜索页面site.com/search(例如,这将是您的登录页面)该页面有自己的控制器/视图SearchController.在同一页面上有一个单独的容器,它基本上可以列出数组中的项目.最后,整个页面都有ApplicationController.
现在,SearchController和ApplicationController明显不同的,因此不能互相访问,其他的属性或方法.然而,他们可以做的是共享工厂/服务或广播信息.为了简化这个例子,我们将让他们共享一个名为的服务SearchService.
如果您仍然希望使用指令,您可以轻松地将其SearchController转换为指令并为自己使用相同的概念.
SearchService
在SearchService将包含有用的属性和方法的搜索,但你现在需要的权利仅仅是一个简单的Array包含搜索结果列表.
myApp.factory('SearchService', function() {
var SearchService;
SearchService = {};
// The array that will contain search results
SearchService.arrSearchResults = [];
return SearchService;
}
);
ApplicationController的
该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
该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>
标签
要切换搜索结果的类型(Web,图像等),您可以在其中创建一个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以进行演示.
| 归档时间： |
|
| 查看次数： |
17579 次 |
| 最近记录： |