當使用setTimeout和$ scope更新角度範圍變量時，Bootstrap Modal UI不會更新$ apply（）

Question

我在使用角度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」，這些都是大部分時間。