标签: angularjs-timeout

我一直在使用AngularJS一段时间,并且发现需要每隔一段时间使用$ timeout(似乎通常是初始化一个jQuery插件).

最近,我一直在努力更好,更深入地了解摘要周期,我遇到了$ evalAsync函数.

似乎该函数产生类似的结果$timeout,只有你没有给它延迟.每次我使用$timeout它都会延迟0,所以现在我想知道我是否应该使用它$evalAsync.

这两者之间是否存在根本差异？你会用哪种情况比另一种情况多？我想更好地了解何时使用哪一个.

我的HTML中有一个" ng-init "指令,它在我的Angular.js数据模型中初始化" data.id " 的值.我们现在说,我无法改变其运作方式.

现在,我希望在页面加载后立即发出HTTP请求,其中URL将取决于此data.id值.到目前为止,以下似乎有效:

app.controller('MainCtrl', function ($scope, $http, $timeout) {
  "use strict";

  $scope.data = {};

  $timeout(function () {
    $http.get("/api/Something?id=" + $scope.data.id);
  }, 0);
});

但是,使用超时为零的计时器似乎很笨拙.(如果我省略$ timeout代码并直接调用$ http.get,那么$ scope.data.id当然是未定义的).

在发出$ http请求之前,有没有更好的方法等待ng-init执行？以上基于超时的代码是否适用于所有情况/所有浏览器等？

基本上,我想在角度操纵DOM之后测量元素的宽度.所以我想使用$ timeout,但它一直让我犯错误.

HTML

   <div ng-app="github">
      <ul mynav>
        <li ng-repeat="nav in navItems">{{nav.name}}</li>
      </ul>

      </div>
    </div>

CSS

ul,li {
  display:inline-block;
}
li {
  margin-right:1em;
}

JS

(function() {
  angular.module('github', [])
    .directive('mynav', function($window) {
      return {
        restrict: 'A',
        link: function(scope, element, attrs, timeout) {
          scope.navItems = [{
            "name": "home"
          }, {
            "name": "link1"
          }, {
            "name": "link2"
          }, {
            "name": "link3"
          }];
          timeout(function() {
            console.log($(element).width());
          })
        }

      }
    });
})();

我遇到了AngularJS和$ timeout的一些问题.
在页面加载后我需要运行一些代码.Http.get()加载项目,ng-repeat在表格中显示它们.然后我需要运行代码以在我单击它时突出显示行.

我找到了使用$ timeout的解决方案.

$timeout(function () {
    console.log('in timeout');
    $scope.highlightRows();
});

这确实有效,但不是每次都有效.在函数中我记录表中的行数,有时我得到0,因此点击处理程序没有注册,突出显示不起作用.

$scope.highlightRows = function () {
    console.log($("#tripsTable").children("tbody").children("tr").length);
    $("#tripsTable").children("tbody").children("tr").children().click(function () {
        console.log('row click');
        $("#tripsTable").children("tbody").children("tr").removeClass("focusedRow");
        $(this.parentNode).addClass("focusedRow");
    });
};

尝试模拟时我必须按Ctrl + F5刷新.

控制台日志:

in timeout tripsController.js:14
0 

我找不到这个问题的任何溶液,有什么建议可以理解的:)
谢谢你
马克

编辑: 这是我的HTML

<table class="table table-bordered" id="tripsTable">@*table-hover*@
    <thead>
        ....
    </thead>
    <tbody>
        <tr ng-repeat="trip in tripsVM.tripsList | orderBy: 'startDate'" ng-class="(trip.tripID == 0) ? 'newRow' : ''" class="row">
            ....

我正在对视图中用于生成列表的数据执行AJAX请求.我需要知道$ scope更新的时间以及收到成功响应后呈现视图的时间,以便我可以为列表动态设置一些初始值和一些事件处理程序.

我目前正在使用以下代码,但没有做到这一点:

responsePromise.success(function (data, status, headers, config) {
    var slideInfos = data;
    $scope.slideInfos = slideInfos;
    setInitialSliderValues();
});

在我调用setInitialSliderValues()时,视图仍然没有刷新.

当我尝试使用以下内容时,我收到错误"$ digest已在进行中":

responsePromise.success(function (data, status, headers, config) {
    var slideInfos = data;
    $scope.$apply(function () {
        $scope.slideInfos = slideInfos ;
        setInitialSliderValues();
    }
});

如何在不使用检查我期望的更改的计时器的情况下确保数据更改已在页面上生效.

在$ timeout函数中访问对象需要做些什么特别的事情吗？

当我尝试在$ timeout函数中访问它时,我得到错误,说路由未定义,但在$ timeout函数(控制台日志所在的位置)之外,它会记录对象,其中的所有内容都符合预期:

$scope.drawRoutes = function(routes) {
  console.log(routes);
  for (var i = 0; i < routes.length; i++) {
     $timeout(function() {
        MapService.directionsService.route(routes[i], function(response, status) {
           if (status == google.maps.DirectionsStatus.OK) {
              MapService.direction_renderers.push(new google.maps.DirectionsRenderer());
              MapService.direction_renderers[MapService.direction_renderers.length - 1].setMap(MapService.gmaps.map);
              MapService.direction_renderers[MapService.direction_renderers.length - 1].setDirections(response);
              $scope.connectors_created += 1;
              $scope.$digest();
           }
        });
     }, 1000);
   }
};