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。
现在,如果用户在文本框中键入搜索产品,我想再次加载产品控制器来显示产品。
怎么做?有什么帮助吗?