[英]$scope doesn't outside callback function
I have developed AngularJS application that integrates with PouchDB database. 我已经开发了与PouchDB数据库集成的AngularJS应用程序。 When trying to get info from the database, the $scope variable exists only inside the method.
尝试从数据库获取信息时,$ scope变量仅存在于方法内部。
db.allDocs({include_docs: true, descending: true}, function(err, doc) {
$scope.$apply(function(){
$scope.info = doc.rows;
});
});
$scope.select = function(id){
for(var i = 0; i < $scope.info.length; i++){
if(id == $scope.info[i].doc._id){
$scope.$apply(function (){
$scope.sName = $scope.info[i].doc.name;
$scope.sSurname = $scope.info[i].doc.surname;
$scope.sPhone = $scope.info[i].doc.phone;
$scope.sAddress = $scope.info[i].doc.address;
console.log($scope.info[i].doc);
});
}
}
};
Here I call the Select function to select a user, and then I want to show that user in the inputs so I can update the info. 在这里,我调用Select函数来选择一个用户,然后我想在输入中显示该用户,以便更新信息。
<div class="col-xs-6 col-sm-3 sidebar-offcanvas" id="sidebar" role="navigation">
<h3>All users</h3>
<div class="list-group">
<a href="#" ng-repeat="i in info" class="list-group-item" ng-click="select(i.doc._id)">{{i.doc.name + ' ' + i.doc.surname}}</a>
</div>
</div>
Here I use $scope variables 在这里我使用$ scope变量
<div class="col-xs-6 col-sm-3 sidebar-offcanvas" style="margin-left: 20%;">
<h3>Selected user</h3>
<input type="text" ng-model="sName" class="form-control" placeholder="Name" />
<input type="text" ng-model="sSurname" class="form-control" placeholder="Surname" />
<input type="text" ng-model="sPhone" class="form-control" placeholder="Phone" />
<input type="text" ng-model="sAddress" class="form-control" placeholder="Address" />
<br/>
<table>
<tr>
<td><button ng-click="" class="btn btn-lg btn-primary">Update</button></td>
<td><label style="visibility: hidden;">a;dl</label></td>
<td><button ng-click="" class="btn btn-lg btn-danger">Remove</button></td>
</tr>
</table>
</div>
$scope.sName, $scope.sSurname... are undefined outside the select function.. $ scope.sName,$ scope.sSurname ...在select函数之外未定义。
Any help? 有什么帮助吗?
Your problem is that you have a function within a loop, so i
is always equal to $scope.info.length + 1
by the time the function is executed. 您的问题是您在一个循环中有一个函数,因此在执行该函数时,
i
始终等于$scope.info.length + 1
。
If you use jshint , it will warn you of such errors so you don't discover them at runtime. 如果使用jshint ,它将警告您此类错误,因此您不会在运行时发现它们。
The only problem seems to be that you are using $scope.$apply()
inside of a callback to ngClick
(which also triggers an $digest cycle). 唯一的问题似乎是您在
ngClick
的回调中使用$scope.$apply()
(这也会触发$ digest循环)。
Remove $scope.$apply()
and it should work fine: 删除
$scope.$apply()
,它应该可以正常工作:
$scope.select = function (id) {
for (var i = 0; i < $scope.info.length; i++) {
if (id === $scope.info[i].doc._id) {
// $scope.$apply(function (){
$scope.sName = $scope.info[i].doc.name;
$scope.sSurname = $scope.info[i].doc.surname;
$scope.sPhone = $scope.info[i].doc.phone;
$scope.sAddress = $scope.info[i].doc.address;
console.log($scope.info[i].doc);
// });
}
}
};
See, also, this short demo . 另请参见此简短演示 。
Extra bonus 1: 额外红利1:
When a link's href
is #
, most browsers will scroll to the top of the page (unless you manually prevent it). 链接的
href
为#
,大多数浏览器将滚动到页面顶部(除非您手动阻止它)。 If you want your <a>
's to behave as buttons and still be styled as links, you should use href=""
. 如果您希望
<a>
的行为像按钮一样,并且仍设置为链接样式,则应使用href=""
。
Extra bonus 2: 额外红利2:
You don't have to pass the id
and then lopp over all i
s in info
to find a matching doc
. 您不必传递
id
,然后遍历info
所有i
即可找到匹配的doc
。
You can pass the corresponding doc
directly: 您可以直接传递相应的
doc
:
<a href="" ... ng-click="select(i.doc)" ng-repeat="i in info">...</a>
$scope.select = function (doc) {
$scope.sName = doc.name;
$scope.sSurname = doc.surname;
$scope.sPhone = doc.phone;
$scope.sAddress = doc.address;
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.