Переадресация на ссылку с использованием Angular UI Directive Typeahead

Question

Я использую директиву Angular UI Bootstrap typeahead для проекта, и я хочу перенаправить на динамический URL-адрес на основе того, что выбрано в typeahead. Я пытаюсь использовать typeahead в качестве окна поиска.

Я просмотрел документацию (пытается RTFM), поэтому я знаю, что есть атрибут typeaheadOnSelect, который я могу использовать, но я не уверен, как связать это с ссылкой. Я использую JSON-файл объектов, и каждый объект имеет определенный ID. Я надеялся, чтобы иметь возможность связать непосредственно в машинописном атрибута следующим образом:

<div class='container-fluid' ng-controller="TypeaheadCtrl"> 
     <input type="text" id="search" ng-model="selectedPerson" typeahead="person as person.name for person in person | filter:$viewValue" typeahead-min-length="3" typeaheadOnSelect="#/100_Ages/{{person.id}}" ng-init="" /> 
    </div> 

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

Сейчас мой контроллер для этого машинописного выглядит следующим образом:

function TypeaheadCtrl($scope, $http) { 
    $http.get('person.json').success(function(data) { 
     $scope.person = data; 
     }); 
} 

This plunkr показывает все в действии. Мой маршрутизатор для этого проекта является настройка с использованием динамического URL на основе каждого идентификатора JSON, например, так:

angular.module('app', ['ui.bootstrap']). 
    config(['$routeProvider', function($routeProvider) { 
    $routeProvider. 
     when('/app/:personId', {templateUrl: 'partials/person.html', controller: DetailCtrl}). 
    }]); 

Answer 1

Вы можете наблюдать за изменением в модели selectedPerson. Вот пример:

function TypeaheadCtrl ($scope, $http, $location, $log, $timeout) { 
    $http.get('person.json').success(function(data) { 
     $scope.person = data; 
    }); 
    $scope.$watch('selectedPerson', function(newValue, oldValue) { 
    if (newValue){ 
     $log.info('/100_Ages/' + $scope.selectedPerson.id); 
     $location.path('/100_Ages/' + $scope.selectedPerson.id); 
    } 
    }); 
} 

Обновлено: После обновления v0.4.0, я был в состоянии сделать это:

function TypeaheadCtrl ($scope, $http, $location, $log, $timeout) { 
    $http.get('person.json').success(function(data) { 
     $scope.people = data; 
    }); 
    $scope.onSelect = function($item, $model, $label){ 
    $scope.$item = $item; 
    $scope.$model = $model; 
    $scope.$label = $label; 
    $log.info($scope.$item); 
    $log.info($scope.$model); 
    $log.info($scope.$label); 
    $location.path('/person/' + $scope.$item.id); 
    } 
} 

, а затем в HTML, я сделал это:

<input type="text" id="search" placeholder="Search for a name or age" ng-model="selectedPerson" typeahead="person.id as person.name for person in people | filter:$viewValue" typeahead-on-select="onSelect($item, $model, $label)" typeahead-min-length="3" ng-init="" />