当使用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”，这些都是大部分时间。