尝试2控制器之间共享一个动态变量 - 角 [英] Trying to share a dynamic variable between 2 controllers - Angular
问题描述
变量名为 SEARCHTEXT
,这是什么将在搜索框由用户键入
<输入类型=文本级=表格控NG模型=SEARCHTEXT占位符=类型KVK-nummer和preSS输入ID = typehead>
例如网址:的http://本地主机:8091 / ODATA / DLL-POC-DV /账户('41 -125061-0000')//括号内是searchTeaxt
我想实现的是持有SEARCHTEXT的价值,并在2个不同的控制器使用传递SEARCHTEXT URL中接收数据。所以我得到的service变量和2个控制器共享服务:
angular.module('serviceModule',[])
.factory('的DataService',['$ HTTP,DataService的]); DataService的功能($ HTTP,$ rootScope,$范围){
返回{
getSearchText:getSearchText,
setSearchText:setSearchText,
getMainData:getMainData
};
VAR SEARCHTEXT; 功能setSearchText(值){
SEARCHTEXT =价值;
};
功能getSearchText(){
返回SEARCHTEXT;
}; 功能getMainData(ID){
返回$ http.get(HTTP://本地主机:8091 / ODATA / DLL-POC-DV /账户(KVK ='+身份证+'))。然后(
功能(结果){console.debug(结果);返回result.data.d.results}) };
$范围。$腕表('SEARCHTEXT',函数(的newval,OLDVAL){
的console.log(的newval,OLDVAL);
})
};
第一个控制器:
angular.module('炫魅',['serviceModule'])
.controller('MainCtrl',['$范围,$ HTTP,DataService的',函数($范围,$ HTTP,DataService的){ dataService.setSearchText($ scope.searchText); $ scope.getMainData =功能(KVK){
$ scope.getMainData =功能(){
dataService.getMainData($ scope.searchText)。然后(功能(数据){
$ scope.getData =数据;
})
}; }]);
第二个控制器:
angular.module('profileDetail',['serviceModule'])
.controller('ProfileCtrl', ['$scope','$filter','$http','$q','$routeParams','dataService','moment',function($scope,$filter,$http,$q,$routeParams,dataService,moment){
//正确数据的初始抢
功能的init(){ 变种SEARCHTEXT = dataService.getSearchText(); dataService.getMainData(SEARCHTEXT)。然后(功能(数据){
$ scope.getData =数据;
});
} 在里面();
}]);
你为什么不实际保存在服务的变量?由于该服务是一个实例,你可以在控制器访问该变量。
angular.module(应用)
.factory('的DataService',['$ HTTP,DataService的]); DataService的功能($ HTTP,$ rootScope,$范围){
变种SEARCHTEXT =; 功能setSearchText(值){
SEARCHTEXT =价值;
} 功能getSearchText(){
返回SEARCHTEXT;
} 返回{
setSearchText:setSearchText,
getSearchText:getSearchText
};
};
此方式可以设置1控制变量,然后访问与服务方式的另一个控制器,无需有任何rootScope东西怎么回事。
所以在控制器A 您可以先设置变量 -
(函数(角){
使用严格的;angular.module(应用)
.controller('ControllerA',['的DataService',ControllerA]);功能ControllerA(DataService的){
VAR VM =这一点; //从该控制器设置变量
dataService.setSearchText(布拉布拉);};
})(window.angular);
然后在访问它的控制器B -
(函数(角){
使用严格的;angular.module(应用)
.controller('ControllerB',['的DataService',ControllerB]);功能ControllerB(DataService的){
VAR VM =这一点; //从该控制器设置变量
变种SEARCHTEXT = dataService.getSearchText();};
})(window.angular);
plnkr: http://plnkr.co/edit/iO7QTY7OBYLEqGuIhCJO?p=preVIEW
Variable is named searchText
and it is what will be typed in the search box by the user
<input type="text" class="form-control" ng-model="searchText" placeholder=" Type KvK-nummer and Press Enter" id="typehead">
Example URL: http://localhost:8091/odata/dll-poc-dv/Account('41-125061-0000') //in brackets is the searchTeaxt
What I want to achieve is to hold the value of searchText and use in 2 different controllers to pass the searchText in URL to receive data. So I get the variable in the serivce and share that service with 2 controllers:
angular.module('serviceModule',[])
.factory('dataService',['$http', dataService]);
function dataService($http,$rootScope,$scope){
return{
getSearchText:getSearchText,
setSearchText: setSearchText,
getMainData: getMainData
};
var searchText;
function setSearchText(value){
searchText = value;
};
function getSearchText(){
return searchText;
};
function getMainData(id){
return $http.get("http://localhost:8091/odata/dll-poc-dv/Account(kvk='"+id+"')").then(
function (result){ console.debug(result);return result.data.d.results})
};
$scope.$watch('searchText',function(newVal,oldVal){
console.log(newVal,oldVal);
})
};
First Controller:
angular.module('mainPage',['serviceModule'])
.controller('MainCtrl',['$scope', '$http','dataService', function ($scope, $http,dataService) {
dataService.setSearchText($scope.searchText);
$scope.getMainData = function(kvk){
$scope.getMainData = function(){
dataService.getMainData($scope.searchText).then(function(data){
$scope.getData= data;
})
};
}]);
Second Controller:
angular.module('profileDetail',['serviceModule'])
.controller('ProfileCtrl', ['$scope','$filter','$http','$q','$routeParams','dataService','moment',function($scope,$filter,$http,$q,$routeParams,dataService,moment){
// initial grab of the right data
function init (){
var searchText = dataService.getSearchText();
dataService.getMainData(searchText).then(function(data){
$scope.getData = data;
});
}
init();
}]);
Why don't you actually save the variable in the service? Since the service is a single instance and you can access that variable across controllers.
angular.module('app')
.factory('dataService',['$http', dataService]);
function dataService($http,$rootScope,$scope){
var searchText = "";
function setSearchText(value) {
searchText = value;
}
function getSearchText() {
return searchText;
}
return{
setSearchText: setSearchText,
getSearchText: getSearchText
};
};
This way can set the variable in 1 controller then access it in another controller with the service methods, no need to have any rootScope stuff going on.
So in the Controller A you can set the variable first -
(function (angular) {
'use strict';
angular.module('app')
.controller('ControllerA', ['dataService', ControllerA]);
function ControllerA(dataService) {
var vm = this;
// Set the variable from this controller
dataService.setSearchText("blabla");
};
})(window.angular);
Then access it in Controller B -
(function (angular) {
'use strict';
angular.module('app')
.controller('ControllerB', ['dataService', ControllerB]);
function ControllerB(dataService) {
var vm = this;
// Set the variable from this controller
var searchText = dataService.getSearchText();
};
})(window.angular);
plnkr : http://plnkr.co/edit/iO7QTY7OBYLEqGuIhCJO?p=preview
这篇关于尝试2控制器之间共享一个动态变量 - 角的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!