尝试2控制器之间共享一个动态变量 - 角 [英] Trying to share a dynamic variable between 2 controllers - Angular
问题描述
变量名为 SEARCHTEXT ，这是什么将在搜索框由用户键入
＆LT;输入类型=文本级=表格控NG模型=SEARCHTEXT占位符=类型KVK-nummer和preSS输入ID = typehead＆GT;
例如网址：的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 searchTextand 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屋！
