Angularjs 当用户开始在搜索字段中键入word时，如何移动到特定模板/xxx.html和控制器。安格拉斯

这是我的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'
        });
}]);

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

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

---

请提供建议。

使用ng include在该页面中放置任何特定模板和控制器

使用

ng if

并根据搜索结果显示/隐藏产品结果

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

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

---

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

在范围模型上设置$watch：

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

HTML

感谢您的回复。我尝试过这种方法，但它只是加载模板，而不是加载控制器。在模板文件或ng include中提及控制器名称。我尝试这样做：但它似乎不起作用<代码>这将为您设置一个JSFIDLE

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