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'
        });
}]);

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

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

请提供建议。

Answer 1

使用ng-include放置任何特定模板＆amp;该页面中的控制器。

使用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>

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

2 个答案: