在 Angular JS 控制器和服务之间传递值 [英] Pass value in-between angular JS controller and services
问题描述
我正在尝试使用 ng-click
从 html 获取用户查询.我想使用从 ng-click 中获取的值进行 https 调用.我可以在 Alert--1 中看到数据,但在 Alert--2 中我得到 undefined
.在互联网上,我读到使用服务传递值是最佳做法.如果我错了,请纠正我.
I am trying to get the user query from html using ng-click
. I want to make a https call using the value which I fetch from ng-click. I can see the data in Alert--1 but in Alert--2 i get undefined
. on internet I read that passing values using services is the best practice.Please correct me if I am wrong.
我的控制器
mainApp.controller('searchController',function($scope,searchString){
$scope.getQuery = function(userq) // its ng-click="getQuery(userq)" on Search button
{
$scope.userq=userq;
alert('Alert--1'+userq); // its working fine
searchString.setSearchString(userq);
};
});
//====================
mainApp.controller('fetchQueryResultController',function($scope,searchString){
var searchStr = searchString.getSearchString();
alert('Alert--2--'+searchStr); // Undefined
// Later I'll use this value to fetch data from Watson search(Django) using $https call
});
我的服务:
mainApp.factory('searchString', function () {
var qVal ;
return {
setSearchString:function (query) {
qVal = query;
},
getSearchString:function () {
return qVal;
}
};
});
路由:
.when('/search', {
templateUrl: "../static/views/seachResult.html",
controller: "fetchQueryResultController"
})
有没有更简单的方法?
推荐答案
使用服务是可以的.看看这个,对于初学者来说很清楚:
Using a service is OK. Take a look at this, is quite clear for begginers:
https://egghead.io/lessons/angularjs-sharing-data-控制器间
alert('Alert--2'+searchStr);
显示未定义,因为它显然在 $scope.getQuery
之前执行.控制器的初始化在 ng-init
计算表达式之前完成.
alert('Alert--2'+searchStr);
is showing undefined because it is being executed before $scope.getQuery
obviously. Controller's initialization is done before ng-init
evaluates the expression.
在您的情况下,我认为最好在设置数据时触发事件,以便通知第二个控制器.这是通过 $on
和 $emit
完成的.
In your case I believe it is better to fire an event when the data is set, so the second controller gets notified. This is being done with $on
and $emit
.
这是一个 plunker 的例子:http://plnkr.co/edit/97mVwbWmoOH3F7m8wbN0?p=预览
Here is a plunker with your example: http://plnkr.co/edit/97mVwbWmoOH3F7m8wbN0?p=preview
var app = angular.module('plunker', []);
app.controller('searchController',function($scope,searchString){
$scope.searchText;
$scope.getQuery = function(userq) // its ng-click="getQuery(userq)" on Search button
{
$scope.userq=userq;
alert('Alert--1'+userq); // its working fine
searchString.setSearchString(userq, $scope);
};
});
//====================
app.controller('fetchQueryResultController',function($scope, $rootScope, searchString){
var searchStr = searchString.getSearchString;
$scope.getData = function(){
searchStr = searchString.getSearchString();
alert('Alert--2--'+ searchStr);
}
$rootScope.$on('dataModified', function(){
$scope.getData();
});
});
//====================
app.factory('searchString', function ($rootScope) {
var qVal ;
return {
setSearchString:function (query) {
qVal = query;
$rootScope.$emit('dataModified');
},
getSearchString:function () {
return qVal;
}
};
});
这篇关于在 Angular JS 控制器和服务之间传递值的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!