使用setTimeout和$ scope。$ apply（）以角度更新范圍變量時，Bootstrap Modal UI不更新

Question

我在使用angular js的引導程序模式中遇到一些問題，我想更好地了解為什么scope變量未更新。 我有一個頁面（我們稱其為主頁），其中包含一個下拉菜單，我可以在其中選擇一個條目。

   <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>

當用戶選擇一個條目時，將觸發ng-change="selectServ()"函數。 這是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);

        });
    };

當用戶選擇一個條目時，在主頁上找到的<p>@{{serv_id}}</p>更新輸出。 但是，使用@include('modals.remote-queue-modal')在我的主頁中包含的作用域變量$scope.serv_id不會更新。

這是在另一個刀片上找到的模態代碼：

<div class="modal fade" id="remote-serv-modal" tabindex="-1" ng-controller="servController">
      @{{serv_id}}
</div>

我沒有包括模態的所有代碼，但是它具有引導模態的所有元素（對話框，標頭和內容）。 上面代碼的重要部分是它具有ng-controller和scope變量。

我究竟做錯了什么？ 任何能將我指向資源的人都非常感激。

Answer 1

您遇到的主要問題是您正在對超出角度的東西進行操作，因此您要么需要通過超時來應用更改，要么只是以角度的方式做更多的事情。

快速回答

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);
        });
    };
}]);

我還修改了代碼，使其與角度方式更加內聯。

更好的答案

您修改的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>

您的控制器

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?
        });
    };
}]);

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);
                    }
                });
            };
        });
    }
]);

我也不知道它是否是有意的，但是您同時擁有“ service_id”和“ serv_id”，這在大多數情況下都是相同的。