사용자가 입력 상자에 입력을 시작할 때 AngularJS로 새 페이지를로드하는 방법

Question

내 경로/검색에 내 데이터베이스의 항목 목록을 표시하는 템플릿 및 관련 컨트롤러가 표시됩니다 (컨트롤러에서 $ scope 변수를 사용하는 템플릿). 그래서/검색을하면 그냥 작동하고 데이터를 표시합니다.

이제는 검색 상자를 페이지 상단에 추가했습니다. 사용자가 입력을 시작하면 웹 사이트 어디에 있든 즉각 결과를 보여주고 싶습니다 (결과가있는 템플릿 표시).

이를 수행하는 각도 방법은 무엇입니까?

내 경로 :

App.config(['$routeProvider', function($routeProvider) { 
    $routeProvider.when('/', { templateUrl: '<%= asset_path "welcome/index.html" %>' }); 
    $routeProvider.when('/search', { templateUrl: '<%= asset_path "search/index.html" %>', controller: 'SearchController' }); 
    $routeProvider.otherwise({ redirectTo: '/' }); 
}]); 

글로벌 레이아웃 :

<form class="navbar-form navbar-left" role="search" data-ng-controller="SearchController"> 
    <div class="form-group"> 
    <input type="text" class="form-control" placeholder="search" data-ng-model="query" /> 
    </div> 
    <button type="submit" class="btn btn-default">Search</button> 
</form> 

<div data-ng-view></div> 

감사관 :

다음

---

내 나는 마침내 그것을 어떻게입니다

angular.module('tastyPie.controllers') 

.controller('SearchController', function($scope, Search) { 

    // Bind to the view 
    $scope.searchResults = []; 
    $scope.query = ''; 

    // if the user is not on the search page and start typing, move him to the search page and perform a search 
    $scope.$watch('query', function(new_data, old_data) { 
    if (new_data == old_data) return; 

    if ($location.path().indexOf('/search') < 0) 
     $location.path('search'); 

    $scope.search(); 
    }); 

    $scope.search = function() { 
    var s = new Search(); 
    s.query = $('#query').val(); 
    s.execute(); 
    }; 

    // callback from the search services which returns the results 
    $scope.$on('searchResults', function(object, results){ 
    $scope.searchResults = results; 
    }); 

}); 

그리고 템플릿 검색/index.html을 :

<ul class="list-group" ng-init="search()"> 
    <li class="list-group-item" ng-repeat="result in searchResults"> 
    <strong>{{result.title_texts}}</strong> 
    <br /> 
    {{result}} 
    </li> 
</ul> 

Answer 1

확인, 지금은 더 나은 당신이 원하는 것을 이해합니다.

• 는
• 이 메인 컨트롤러가 검색을 설정 한 검색 텍스트 필드를 처리하는 메인 컨트롤러로이 서비스를 주입 SearchService
• 정의 : 여기에 내 제한 각도 경험, 그 일을 시도 할 방법 검색 값이 변경 될 때마다 검색 서비스의 텍스트 값을 입력하고/검색하지 않을 경우 위치를 /로 설정하십시오.
• 검색 결과를 표시하는 div와 연결된 검색 컨트롤러가 있습니다.
• 이 검색 컨트롤러에는 SearchService
• 이 검색 컨트롤러에서 검색 텍스트 값이 수정 될 때마다 SearchService에 저장된 검색 텍스트 값이
• 개일 때마다 통보 받기 위해 $scope.watch()을 사용하고 검색 결과를 얻기 위해 HTTP 요청을 실행하고 결과를 저장하십시오 스코프에 넣고보기가 결과를 반복하도록합니다.