[英]Bootstrap Modal UI not updating when the scope variable is updated in angular using setTimeout and $scope.$apply()
I have some issues on my bootstrap modal using angular js on which I would like to better understand why the scope variable is not updating. 我在使用angular js的引导程序模式中遇到一些问题,我想更好地了解为什么scope变量未更新。 I have a page (let's call it main page) on which it contains a dropdown on which I can choose an entry. 我有一个页面(我们称其为主页),其中包含一个下拉菜单,我可以在其中选择一个条目。
<p>@{{serv_id}}</p>
<select class="form-control" id="serv" ng-model="service_id" ng-change="selectServ()">
<option value="179">Serv 1</option>
<option value="180">Serv 2</option>
<option value="181">Ser 3</option>
</select>
<a href="" class="btn-getnum" data-toggle="modal" data-target="#remote-serv-modal">
Get this serv <span class="glyphicon glyphicon-save"></span>
</a>
When the user selects an entry, the ng-change="selectServ()"
function is triggered. 当用户选择一个条目时,将触发ng-change="selectServ()"
函数。 Here is the code for the function which is a part of ng-controller="servController"
: 这是ng-controller="servController"
的一部分的功能代码:
$scope.selectServ = function(){
serv_id = $('#serv').val();
$http.get('/serv/next-serv/' + serv_id).success(function(response){
setTimeout(function(){
$scope.serv_id = serv_id;
$scope.$apply()
$scope.selectServ();
}, 5000);
});
};
When the user selects an entry, <p>@{{serv_id}}</p>
found on the main page updates the output. 当用户选择一个条目时,在主页上找到的<p>@{{serv_id}}</p>
更新输出。 However, the scope variable $scope.serv_id
which is found on my modal which is included in my main page using @include('modals.remote-queue-modal')
does not update. 但是,使用@include('modals.remote-queue-modal')
在我的主页中包含的作用域变量$scope.serv_id
不会更新。
Here is the code for the modal which is found on another blade: 这是在另一个刀片上找到的模态代码:
<div class="modal fade" id="remote-serv-modal" tabindex="-1" ng-controller="servController">
@{{serv_id}}
</div>
I didn't include all the codes of my modal, but it has all the elements of a bootstrap modal (dialog, header and content). 我没有包括模态的所有代码,但是它具有引导模态的所有元素(对话框,标头和内容)。 The important part of the code above is that it has a ng-controller and the scope variable. 上面代码的重要部分是它具有ng-controller和scope变量。
What am I doing wrong? 我究竟做错了什么? Anyone who can point me to a resource is much appreciated. 任何能将我指向资源的人都非常感激。
The main problem that you are having is you are operating on things outside of angular so you either need to $apply your changes through a timeout or just do things more in an angular way. 您遇到的主要问题是您正在对超出角度的东西进行操作,因此您要么需要通过超时来应用更改,要么只是以角度的方式做更多的事情。
Quick answer 快速回答
angular.module('snrApp').controller("servController", ['$scope', '$http', '$timeout', function ($scope, $http, $timeout) {
$scope.selectServ = function(){
var serv_id = $('#serv').val();
$http.get('/serv/next-serv/' + serv_id).success(function(response){
$timeout(function(){
$scope.serv_id = serv_id;//what's the point of this?
, 5000);
});
};
}]);
I also modified the code to be more inline with the angular way. 我还修改了代码,使其与角度方式更加内联。
Better Answer 更好的答案
your modified html code 您修改的html代码
<p>@{{serv_id}}</p>
<select class="form-control" id="serv" ng-model="service_id" ng-change="selectServ(service_id)">
<option value="179">Serv 1</option>
<option value="180">Serv 2</option>
<option value="181">Ser 3</option>
</select>
<a href="" class="btn-getnum" data-toggle="modal" data-target="#remote-serv-modal">
Get this serv <span class="glyphicon glyphicon-save"></span>
</a>
your controller 您的控制器
angular.module('yourApp').controller("servController", ['$scope', '$http', '$timeout', 'yourServletService', function ($scope, $http, $timeout, yourServletService) {
$scope.selectServ = function(service_id){
yourServletService.get(service_id, function(servlet){
$scope.serv_id = service_id;//what's the point of this?
});
};
}]);
example service for your servlet Servlet的示例服务
angular.module('yourApp').factory("yourServletService", [
'$http', function($http) {
return (function(ext) {
return ({
get: get
});
function get(service_id, success, error) {
var request = $http('/serv/next-serv/' + service_id);
return request.then(function(res){
if(success){
success(res.data);
}
}, function(res){
if(error){
error(res.data);
}
});
};
});
}
]);
Also I don't know if it is on purpose or not but you have both "service_id" and "serv_id" which will be the same most of the time. 我也不知道它是否是有意的,但是您同时拥有“ service_id”和“ serv_id”,这在大多数情况下都是相同的。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.