[英]AngularJS: Update view content from layout
You can see what I am trying to do in the following image. 您可以在下图中看到我要执行的操作。
Mainly I have two sections on the page. 主要在页面上有两个部分。 The Header section contains a common menu and a search textbox. 页眉部分包含一个公共菜单和一个搜索文本框。
When the user clicks on the menu, for instance Movies, the Movies.html view will be loaded in the section marked with ng-view. 当用户单击菜单(例如Movies)时,Movies.html视图将被加载到标有ng-view的部分中。
Each view has his own controller defined as following: 每个视图都有自己的控制器,定义如下:
$routeProvider
.when("/", { templateUrl: "app/albums.html", controller: "albumController" })
.when("/games", { templateUrl: "app/games.html", controller: "gamesController" })...etc
So far so good. 到现在为止还挺好。 The idea is that when the user searches something on the textbox the current view will be updated. 这个想法是,当用户在文本框中搜索内容时,当前视图将被更新。
I could have a commonController wrapping the searchTextbox HTML but...how can I update the $scope of the current loaded view from this controller? 我可以有一个commonController来包装searchTextbox HTML,但是...如何从该控制器更新当前已加载视图的$ scope?
What is the best approach to achieve that? 实现此目标的最佳方法是什么?
Thanks all of you 谢谢大家
I think you should use service for that. 我认为您应该为此使用服务 。
Your commonController will notify this service: 您的commonController将通知此服务:
commonController.$inject = ['NotifyViewFactory'];
function commonController(NotifyViewFactory){
var vm = this;
vm.inputModel = '';
this.notifyService = function(){
NotifyViewFactory.setValue(vm.inputModel);
};
//may be in your example better to listen when route changed:
//and then use service
$scope.$on('$routeChangeSuccess', function(scope, next, current){
NotifyViewFactory.setValue(vm.inputModel);
});
}
And factory will look like this: 工厂将如下所示:
NotifyViewFactory.$inject = ['$rootScope'];
function NotifyViewFactory($rootScope){
return {
setValue: setValue
};
function setValue(data){
//do something with data if necessary
$rootScope.$emit('inputUpdated', data);
}
}
And view controller: 和视图控制器:
viewController.$inject = ['$rootScope', '$scope'];
function viewController($rootScope, $scope){
$rootScope.$on('inputUpdated',function(event, data){
$scope.someValue = data.someValue;
});
}
So, that data from commonController can be passed to viewController without any changes, or if you need some change - you can do that in setValue method of NotifyViewFactory (before $rootScope.$emit call). 因此,可以将commonController中的数据直接传递给viewController,而无需进行任何更改-您可以在NotifyViewFactory的 setValue方法中进行此操作 (在$ rootScope。$ emit调用之前)。
The easiest solution is to use a $scope variable that is accessible across controllers. 最简单的解决方案是使用跨控制器可访问的$ scope变量。
In your header controller define: 在标头控制器中定义:
'$scope.global = {};' '$ scope.global = {};'
Then assign the search value to that object, such as: 然后将搜索值分配给该对象,例如:
'$scope.global.searchValue = "Ready Player One"' '$ scope.global.searchValue =“就绪玩家一”
You'll then be ale to access that variable in your other controllers without having to go through all the complexity of using a service. 然后,您将无需在使用服务的所有复杂过程中访问其他控制器中的该变量。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.