【发布时间】：2015-08-26 19:59:36
【问题描述】：
我想在我的项目中进行搜索。 在导航模板 (nav.html) 中，我有我的搜索表单。 单击结果模板 (search.html) 内的搜索按钮后，应显示结果 单击搜索按钮也总是“重定向”到结果视图。 搜索表单中的值也总是由搜索控制器（SearchCtrl）检索，但从那时起我就卡住了！
我的结果不会显示在我的结果视图中。任何想法如何解决这个问题？ 提前致谢！
这是我的代码 sn-ps（简化）：
主页（index.html）：
<body>
<!-- Navigation -->
<nav class="navbar navbar-default navbar-fixed-top" role="navigation" ng-include="'views/nav.html'"></nav>
<!-- Content -->
<div class="view-container" ng-view></div>
</body>
导航视图（nav.html）：
<div class="col-sm-3 col-md-3 pull-right" ng-controller="SearchCtrl">
<form class="navbar-form" role="search">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search games" ng-model="search.text">
<div class="input-group-btn">
<button class="btn btn-default" type="button" ng-Click="findValue(search.text); redirect('/search/')"><i class="glyphicon glyphicon-search"></i></button>
</div>
</div>
<div style="color:#fff;">{{search.text}}</div>
</form>
</div>
搜索视图（search.html）：
<div ng-repeat="result in results" data-id="{{result.short}}">
<div>
<h4>{{result.name}}</h4>
</div>
</div>
路由：
.when('/search/', {
controller: 'SearchCtrl',
templateUrl: urlViews + 'search.html'
})
工厂：
// Call the service
var callRestService = function ($resource) {
var res = $resource('data/:id'); // Note the full endpoint address --> id contains the url params!
return res;
};
callRestService.$inject = ['$resource'];
app.factory('callRestService', callRestService);
// Call the search
var Search = function ($resource) {
return {text:''};
};
Search.$inject = ['$resource'];
app.factory('Search', Search);
控制器：
var NavbarCtrl = function ($scope, $location) {
$scope.getClass = function(path) {
var substr = 3,
cur_path = $location.path().substr(substr, path.length);
if (cur_path == path) {
if($location.path().substr(0).length > 1 && path.length == 1) {
return '';
} else {
return 'active';
}
} else {
return '';
}
};
// toggle active class for nav
$scope.isActive = function (viewLocation) {
return viewLocation === $location.path();
};
// redirect on click
$scope.redirect = function (path) {
$location.path(path);
};
};
NavbarCtrl.$inject = ['$scope', '$location'];
app.controller('NavbarCtrl', NavbarCtrl);
var SearchCtrl = function ($scope, callRestService, Search) {
$scope.json = 'data.json';
$scope.findValue = function(Search) {
var searchValue = Search;
console.log('searchValue: ', searchValue); // all search input will be displayed!
var res = callRestService.get({
id: $scope.json
}, function() {
$scope.games = res.games;
$scope.results = [];
angular.forEach($scope.games, function(key, value) {
if (key.name === searchValue) {
$scope.results.push({
name: key.name,
short: key.short
});
}
console.log('searchValue - in: ', searchValue); // all search input will be displayed!
console.log('$scope.results: ', $scope.results); // all results will be displayed!
});
}
);
};
};
SearchCtrl.$inject = ['$scope', 'callRestService', 'Search'];
app.controller('SearchCtrl', SearchCtrl);
查看Plunker
【问题讨论】：
-
你有没有机会用它做一个快速的 Plunkr？只是看看 $location.path() 调用后是否没有创建新范围...
-
我会这样做的 ;) 等等……
-
Plunkr 创建：plnkr.co/edit/9PAAsb?p=info
-
我现在去看看
标签： angularjs angularjs-scope angularjs-ng-repeat