AngularJS - 当用户在文本框中键入时如何更改控制器

时间:2015-07-19 09:37:02

标签: angularjs

HTML正文代码。

<body>
    <div ng-controller="MainCtrl as mc">
        <div class='container'>
            <div class='row navbar navbar-default navbar-fixed-top'  style="background-color:#006633;">
                <div class='col-md-6'>
                    <input style="margin-top:10px;" type="text" ng-model="SearchText" placeholder="Search for more than 10,000 products..." class='form-control' size="50">
                </div>
                <div class='col-md-2'>
                    <a ui-sref="Login" style="position:absolute; margin-top:15px; color:#FFFCBA"><strong>LOGIN</strong></a>
                </div>
            </div>
        </div>
        <div id="middle" class='container'>
            <div class='row'>
                <div id="right" class='col-md-10'>
                    <div ui-view></div>
                </div>
            </div>
        </div>
    </div>
</body>

路由代码

sampleApp.config(function($stateProvider, $urlRouterProvider) {
    $urlRouterProvider.otherwise("/Products/38/");
    $stateProvider
        .state('Products', {
            templateUrl: "templates/Products.html",
            url: '/Products/:SCID/:BrandID',
            controller: 'ProductsController as pc'
        })
        .state('Login', {
            templateUrl: "templates/Login.html",
            url: "/Login",
            controller: 'LoginController'
        });
});

控制器

sampleApp.controller('ProductsController', function ($scope, $routeParams, $log, $rootScope, $stateParams, ProductService) {
    $scope.$on('SearchTextChanged', function(event, SearchText) {
        if (SearchText.length >=3)  {
            $scope.FilterExpr = SearchText;
        }
    });
});

Products.html模板

<div ng-if="SearchText.length>=3" class='box' ng-repeat="product in pc.ProductService.Products | filter:FilterExpr | orderBy:'ProductName'">
    <ng-include src="'commonTemplate.html'"></ng-include>
</div>

在用户点击登录按钮之前,一切正常。一旦用户点击登录按钮,控制器就会移动到LoginController。

现在,如果用户在文本框中键入搜索产品,我想再次加载产品控制器来显示产品。

怎么做?有什么帮助吗?

0 个答案:

没有答案