在Angularjs组件之间共享数据
问题描述:
我在尝试重构Angularjs 1.4 webapp以使用组件。
该web应用程序具有一个“搜索”输入框的标题:主部分示出了根据在搜索输入文本输入的值过滤的联系人的列表。
我想使用的用户界面路由器(从列表切换到详细信息。我创建页眉和指数组成,定义在我保存的搜索值的服务,定义的“决心”的状态app.index那调用服务
问题是,当状态被加载时,解析只完成一次,而我想更新每个jeypress的过滤器
在我的代码中,我已经将搜索模型绑定到父组件和头,所以我可以只创建重复每个模板内的头组件的部件,我认为这会工作,但我不知道是否有一个更优雅的方式做到这一点(信号不是很优雅,你不这么认为吗?) 这里是我的
App.html在Angularjs组件之间共享数据
<header-cnt-component search="$ctrl.search"></header-cnt-component>
<ui-view> </ui-view>
App.js
angular
.module('app')
.component('app', {
templateUrl: 'app/containers/App.html',
controller: App
});
function App() {
this.search = {};
}
HeaderCnt.html
<nav class="navbar navbar-default" role="navigation">
<div class="collapse navbar-collapse" id="nav-toggle">
<form class="navbar-form navbar-right" role="search">
<input type="text" class="form-control" placeholder="Search" ng-model="$ctrl.search.name" ng-keyup="$ctrl.startSearch()">
</form>
</div>
</nav>
HeaderCnt.js
angular
.module('app')
.component('headerCntComponent', {
templateUrl: 'app/components/HeaderCnt.html',
controller: HeaderCnt,
bindings: {
search: '='
}
});
/** @ngInject */
function HeaderCnt(contactsService, searchService, $location) {
this.contactsService = contactsService;
this.searchService = searchService;
this.location = $location;
this.contacts = contactsService.get();
}
HeaderCnt.prototype = {
startSearch: function() {
this.searchService.set(this.search);
this.location.path('/');
}
};
的index.html
<div class="table-responsive">
<table class="table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Email Address</th>
<th>Phone Number</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="contact in $ctrl.contacts | filter:$ctrl.search">
<td>{{contact.name}}</td>
<td>{{contact.email}}</td>
<td>{{contact.phone}}</td>
</tr>
</tbody>
</table>
</div>
个
Index.js
angular
.module('app')
.component('indexComponent', {
templateUrl: 'app/components/Index.html',
controller: Index,
bindings: {
search: '='
}
});
/** @ngInject */
function Index(contactsService) {
this.contactsService = contactsService;
this.contacts = contactsService.get();
}
Index.prototype = {
};
search.js
function SearchService() {
var search = {};
this.get = function() {
return search;
};
this.set = function (searchData) {
search = searchData;
};
}
route.js
angular
.module('app')
.config(routesConfig);
/** @ngInject */
function routesConfig($stateProvider, $urlRouterProvider, $locationProvider) {
$locationProvider.html5Mode(true).hashPrefix('!');
$urlRouterProvider.otherwise('/');
$stateProvider
.state('app', {
component: 'app'
})
.state('app.index', {
url: '/',
component: 'indexComponent',
resolve: {
search: function (searchService) {
// var search = {};
// search.name = 'aus';
return searchService.get();
// return search;
}
}
});
}
答
如果我给你正确的,这可能帮助。 我会为搜索添加新的状态:
.state('app.index.search', {
url: '/search/:searchString',
component: 'indexComponent',
resolve: {
search: $stateParams => $stateParams.searchString
}
}
})
,如果你已经在indexComponent休息搜索结合应该是相当简单的。
/搜索/一些用户的搜索
将解决您的状态,搜索字符串,如果你想切换到特定的搜索字符串状态控制器上,你可以使用:
$state.go('app.index.search', searchString)
一件事,您可以使用ng-model-options = {debounce:500}在输入(0.5s)后获得延迟,并将观察者放在控制器上以更改模型。
让你输入HTML:
<input type="text" class="form-control" placeholder="Search" ng-model="$ctrl.search.name" ng-model-options="{debounce: 500}"/>
和控制器:
this.$scope.$watch('$ctrl.search.name', (newVal, oldVal) => {
newVal && $state.go('app.index.search', newVal');
});
让我知道,如果它帮助。
谢谢你的回答!我尝试了你的建议的第一部分:param没有传递给控制器... – deck80