当用户开始在搜索字段中键入单词时，如何移动到特定的模板/xxxx.html和控制器.AngularJS

Question

这是我的routeProvider代码。点击相应链接即可正常工作。

sampleApp.config(['$routeProvider',
  function($routeProvider) {
    $routeProvider.
        when('/Login', {
            templateUrl: 'templates/ShowLogin.html',
            controller: 'LoginController'
        }).
        when('/SignUp', {
            templateUrl: 'templates/SignUp.html',
            controller: 'SignupController'
        }).
        when('/ForgotPassword', {
            templateUrl: 'templates/ForgotPassword.html',
            controller: 'PasswordController'
        }).
        when('/ShoppingCart', {
            templateUrl: 'templates/ShoppingCart.html',
            controller: 'ShoppingCartController'
        }).
        when('/Products/:SCId', {
            templateUrl: 'templates/Products.html',
            controller: 'ProductsController'
        }).

        otherwise({
            redirectTo: '/Login'
        });
}]);

我的问题是，如果点击链接，我开始在文本字段中键入，我们可以移动到任何特定的模板/xxxx.html和控制器吗。事实上，我的要求是，一旦用户开始在HTML页面的搜索字段中键入内容，控件就应该转移到

templateUrl: 'templates/Products.html',
controller: 'ProductsController'

请提供建议。

Answer 1

使用ng-include放置任何特定的模板&控制器。

使用ng-if并根据搜索结果显示/隐藏产品结果。

<div ng-include src="'templates/Products.html'" ng-if="searchfieldmodel" ></div>

在该页面中，添加适当的控制器。

使用适当的CSS来显示/隐藏页面的其他内容。

Answer 2

在您的范围模型上设置$watch：

app.controller('ctrl', function($scope, $location) {
    $scope.userKeyed = '';
    $scope.$watch('userKeyed', function(newVal) {
        if (newVal && newVal.length > 0) 
            $location.path = '/products/' + newVal;
    });
});

HTML

<div ng-controller="ctrl">
   <input type="text" ng-model="userKeyed" />
</div>