- 首页
- 其他开发
- AngularJS 如何通过 $rootScope 获取数据到控制器?
AngularJS 如何通过 $rootScope 获取数据到控制器?
[英] AngularJS How to get data to controller via $rootScope?
本文介绍了AngularJS 如何通过 $rootScope 获取数据到控制器?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在开发一个移动应用程序，但在向控制器获取数据时遇到问题.我所做的是从服务中获取数据并且运行良好(在路由时这是/"或根目录):
var listdnModule = angular.module('listdn', []);listdnModule.factory('getActiveDnService', ['$http', function ($http) {返回 {getActiveDnSvc:函数(izvajalecID){return $http({ method: 'POST', url: 'svc.aspx/getActiveDN', data: "{'izvajalecID':" + "'" + izvajalecID + "'}", cache: true });}};}]);listdnModule.controller('listdnCtrl', ['$scope', '$http', 'getActiveDnService','$rootScope', function ($scope, $http, svc, $rootScope) {$scope.mjav = 1;svc.getActiveDnSvc($scope.mjav).success(function (data) {$rootScope.dnlist = data.d;$scope.listdn = data.d;});}]);
所以这很好用.它将数据设置到 rootScope 和 localscope 并从本地范围读取它.
然后我将客户列表链接到客户详细信息.路由设置如下:
mSvc.config(['$routeProvider',功能($routeProvider){$routeProvider.什么时候('/'， {templateUrl: 'tmpl/listdn.html',控制器:'listdnCtrl'}).当('/设置'，{templateUrl: 'tmpl/nastavitve.html',控制器:'设置'}).当('/dndetail/:dnid', {templateUrl: 'tmpl/dndetail.html',控制器:'dndetailCtrl'}).除此以外({重定向到:'/'});}]);
在我尝试获取 dndetail 后出现错误.我从 $routeParams 获得了正确的 ID，但我没有在正确的时间获得数据.代码是这样的:
var dndetail = angular.module('dndetail', []);dndetail.controller('dndetailCtrl', ['$rootScope', '$scope', '$routeParams', function ($rootScope, $scope, $routeParams) {console.log($rootScope.dnlist[0]);$scope.datal = $rootScope.dnlist;$scope.id = $routeParams.dnid;for(var i = 0; i <= datal.length; i++) {if (datal[i].ID === $scope.id) {$scope.data = datal[i];}}}]);
这是我得到的错误:
如您所见，console.log 获取对象并打印输出(我屏蔽了它，因为它是公司数据)而 datal 未定义.chrome DevTools 中的特殊 AngularJS 选项卡也表示数据在那里:
最后是没有获取数据的视图模板:
<li class="list-group-item"><div class="row info-row-li"><div class="pull-left">Naslov</div><div class="pull-right"><a ng-href="https://maps.google.com/?q={{ data.Ulica }} {{ data.Posta }} {{ data.Kraj }}">{{ $root.dnlist[1].Ulica }}<br/>{{ data.Posta }} {{ data.Kraj }}<br/>{{ data.Drzava }}</a>
<li class="list-group-item"><div class="row info-row-li"><div class="pull-left">Datum izvedbe</div><div id="kupec-pe" class="pull-right">{{ data.DatumIzvedbe }}</div>
<li class="list-group-item"><div class="row info-row-li"><div class="pull-left">基准面</div><div id="kupec-dst" class="pull-right">{{ data.DatumNaloga }}</div>
<li class="list-group-item"><div class="row info-row-li"><div class="pull-left">Opis:</div><div id="kupec-komerc" class="pull-right">{{ data.Opis }}</div>
<li class="list-group-item"><div class="row info-row-li"><div class="pull-left">Šifra dejavnosti:</div><div id="kupec-sif" class="pull-right">{{ data.sifDej }}</div>
<li class="list-group-item"><div class="row info-row-li"><div class="pull-left">Šifra dejavnosti:</div><div id="Div1" class="pull-right">{{ data.DatumIzvedbe }}</div>
有什么想法吗?
更新
这是新的控制器:
dndetail.controller('dndetailCtrl', ['$rootScope', '$scope', '$routeParams', function ($rootScope, $scope, $routeParams) {$rootScope.dnlist;$scope.id = $routeParams.dnid;for (var i = 0; i <= $rootScope.dnlist.length; i++) {if ($rootScope.dnlist[i].ID === $scope.id) {$scope.data = $rootScope.dnlist[i];}}}]);
还是不行.从一组元素中，我想通过 id 获取一个元素，然后将其保存到数据中，以便我可以从数据中读取.For 循环无法获取数据(未识别的 dnlist)，但如果我在模板中绑定 {{ $root.dnlist[1].Property }} 则它可以工作.
解决方案
如果有人想知道问题出在相等运算符上.如果我将 === 更改为检查类型 == 我不会再收到 TypeError: Cannot read property 'ID' of undefined error .由于这是问题的解决方案，我也想解释一下.诚然，我是一名 javascript 初学者，如果有人知道这里发生了什么，我非常想知道解释.
有效的新控制器:
dndetail.controller('dndetailCtrl', ['$rootScope', '$scope', '$routeParams', function ($rootScope, $scope, $routeParams) {$rootScope.dnlist;$scope.id = $routeParams.dnid;for (var i = 0; i <= $rootScope.dnlist.length; i++) {if ($rootScope.dnlist[i].ID == $scope.id) {$scope.data = $rootScope.dnlist[i];}}}]);
I'm working on an mobile app and I'm having problems with getting data to the controller. What i do is i get the data from a service and that works well (on routing this is '/' or root directory):
var listdnModule = angular.module('listdn', []);
listdnModule.factory('getActiveDnService', ['$http', function ($http) {
return {
getActiveDnSvc: function (izvajalecID) {
return $http({ method: 'POST', url: 'svc.aspx/getActiveDN', data: "{'izvajalecID':" + "'" + izvajalecID + "'}", cache: true });
}
};
}]);
listdnModule.controller('listdnCtrl', ['$scope', '$http', 'getActiveDnService','$rootScope', function ($scope, $http, svc, $rootScope) {
$scope.mjav = 1;
svc.getActiveDnSvc($scope.mjav).success(function (data) {
$rootScope.dnlist = data.d;
$scope.listdn = data.d;
});
}]);
So this works fine. It sets the data to the rootScope and to localscope and reads it from local scope.
Then i'm linking the list of Costumers to costumerdetail. The route settings are like this:
mSvc.config(['$routeProvider',
function ($routeProvider) {
$routeProvider.
when('/', {
templateUrl: 'tmpl/listdn.html',
controller: 'listdnCtrl'
}).
when('/settings', {
templateUrl: 'tmpl/nastavitve.html',
controller: 'settings'
}).
when('/dndetail/:dnid', {
templateUrl: 'tmpl/dndetail.html',
controller: 'dndetailCtrl'
}).
otherwise({
redirectTo: '/'
});
}]);
The error comes after i try to get dndetail. I get the right ID from $routeParams but i dont get the data in the right time. The code is this:
var dndetail = angular.module('dndetail', []);
dndetail.controller('dndetailCtrl', ['$rootScope', '$scope', '$routeParams', function ($rootScope, $scope, $routeParams) {
console.log($rootScope.dnlist[0]);
$scope.datal = $rootScope.dnlist;
$scope.id = $routeParams.dnid;
for(var i = 0; i <= datal.length; i++) {
if (datal[i].ID === $scope.id) {
$scope.data = datal[i];
}
}
}]);
And this is the error i get:
As you can see the console.log gets the object and prints the output (I masked it because it's company data) while datal is undefined. The special AngularJS tab in chrome DevTools also says the data is there:
And for the end the template of the view that doesnt get data:
<ul ng-controller="dndetailCtrl" class="list-group">
<li class="list-group-item">
<div class="row info-row-li">
<div class="pull-left">Naslov</div>
<div class="pull-right">
<a ng-href="https://maps.google.com/?q={{ data.Ulica }} {{ data.Posta }} {{ data.Kraj }}">
{{ $root.dnlist[1].Ulica }}<br />
{{ data.Posta }} {{ data.Kraj }}<br />
{{ data.Drzava }}</a>
</div>
</div>
</li>
<li class="list-group-item">
<div class="row info-row-li">
<div class="pull-left">Datum izvedbe</div>
<div id="kupec-pe" class="pull-right">{{ data.DatumIzvedbe }}</div>
</div>
</li>
<li class="list-group-item">
<div class="row info-row-li">
<div class="pull-left">Datum naloga</div>
<div id="kupec-dst" class="pull-right">{{ data.DatumNaloga }}</div>
</div>
</li>
<li class="list-group-item">
<div class="row info-row-li">
<div class="pull-left">Opis:</div>
<div id="kupec-komerc" class="pull-right">{{ data.Opis }}</div>
</div>
</li>
<li class="list-group-item">
<div class="row info-row-li">
<div class="pull-left">Šifra dejavnosti:</div>
<div id="kupec-sif" class="pull-right">{{ data.sifDej }}</div>
</div>
</li>
<li class="list-group-item">
<div class="row info-row-li">
<div class="pull-left">Šifra dejavnosti:</div>
<div id="Div1" class="pull-right">{{ data.DatumIzvedbe }}</div>
</div>
</li>
</ul>
Any ideas?
UPDATE
This is the new controller:
dndetail.controller('dndetailCtrl', ['$rootScope', '$scope', '$routeParams', function ($rootScope, $scope, $routeParams) {
$rootScope.dnlist;
$scope.id = $routeParams.dnid;
for (var i = 0; i <= $rootScope.dnlist.length; i++) {
if ($rootScope.dnlist[i].ID === $scope.id) {
$scope.data = $rootScope.dnlist[i];
}
}
}]);
still doesnt work. From an array of elements i want to get one element by id and then save it to data so i can read from data. For loop doesnt get the data (unindentified dnlist) but if i bind {{ $root.dnlist[1].Property }} in the template it works.
解决方案
If anyone was wondering the problem was with the equality operator. If I change === with the one that checks type == i dont get the TypeError: Cannot read property 'ID' of undefined error any more. Since this is the solution to the problem I'd like to have an explanation also. I'm a javascript beginner to be true and if someone got an idea what happened here, I'd very much like to know the explanation.
The new controller that works:
dndetail.controller('dndetailCtrl', ['$rootScope', '$scope', '$routeParams', function ($rootScope, $scope, $routeParams) {
$rootScope.dnlist;
$scope.id = $routeParams.dnid;
for (var i = 0; i <= $rootScope.dnlist.length; i++) {
if ($rootScope.dnlist[i].ID == $scope.id) {
$scope.data = $rootScope.dnlist[i];
}
}
}]);
这篇关于AngularJS 如何通过 $rootScope 获取数据到控制器?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
