69

在控制器中，我使用 $http 或 $resource 服务获取一些 JSON 数据。然后我在 $scope 中写入这些数据，AngularJS 更新页面的 HTML 结构。我的问题是我需要知道用 Angularng-repeat指令填充的列表（我的意思是 HTML DOM 元素）的新大小（宽度和高度）是多少。因此，我必须在 Angular 完成更新 DOM 结构后立即运行 javascript 代码。正确的方法是什么？我在过去四个小时内搜索了互联网，但找不到任何解决问题的方法。

这就是我接收 JSON 数据的方式：

var tradesInfo = TradesInfo.get({}, function(data){
    console.log(data);
    $scope.source.profile = data.profile;
            $scope.trades = $scope.source.profile.trades;
        $scope.activetrade = $scope.trades[0];
        $scope.ready = true;


    init();  //I need to call this function after update is complete

});

这就是init()函数中发生的事情：

function init(){
    alert($('#wrapper').width());
    alert($('#wrapper').height());
}

我知道必须有一些容易解决这个问题的方法，但我现在找不到。提前致谢。

4

4 回答 4

64

实际上在这种情况下，角度方式不是简单的方式，而是唯一正确的方式:)

您必须编写一个指令并附加到您想知道其高度的元素。从控制器 $broadcast 一个事件，指令将捕获该事件，您可以在那里进行 DOM 操作。永远不要在控制器中。

var tradesInfo = TradesInfo.get({}, function(data){
    console.log(data);
    $scope.source.profile = data.profile;
    ...

    $scope.$broadcast('dataloaded');
});


directive('heightStuff', ['$timeout', function ($timeout) {
    return {
        link: function ($scope, element, attrs) {
            $scope.$on('dataloaded', function () {
                $timeout(function () { // You might need this timeout to be sure its run after DOM render.
                    element.width()
                    element.height()
                }, 0, false);
            })
        }
    };
}]);
于 2013-06-05T09:25:32.313 回答
7

Olivér 的回答很好，但有一个问题：如果您忘记广播事件，您的 javascript 将无法运行，而您的数据可能已更改。另一种解决方案是观察范围的变化，例如：

var tradesInfo = TradesInfo.get({}, function(data) {
  console.log(data);
  $scope.profile = data.profile;
  // ...
});


directive('heightStuff', ['$timeout',
  function($timeout) {
    return {
      scope: {
        myData: '='
      },
      link: function($scope, element, attrs) {
        $scope.$watch('myData', function() {
          $timeout(function() { // You might need this timeout to be sure its run after DOM render.
            element.width()
            element.height()
          }, 0, false);
        })
      }
    };
  }
]);

<div height-stuff my-data="profile"></div>

这样，每次数据更改时都会调用 javascript 函数，而无需任何自定义事件。

于 2015-08-12T10:26:17.367 回答
5

另一个使用 JQuery 的建议。必须为在指令中生成的网格解决这个问题。我想滚动到网格中的特定行。使用 $emit 从指令广播到父控制器：

在控制器中：

    ['$timeout',function($timeout){
...
 $scope.$on('dataloaded', function () {
            $timeout(function () { // You might need this timeout to be sure its run after DOM render.
                $scope.scrollToPosition();
            }, 0, false);
        });
        $scope.scrollToPosition = function () {
            var rowpos = $('#row_' + $scope.selectedActionID, "#runGrid").position();
            var tablepost = $('table', "#runGrid").position();
            $('#runGrid').scrollTop(rowpos.top - tablepost.top);
        }

在指令中

.directive('runGrid',['$timeout', function ($timeout) {
        // This directive generates the grip of data
        return {
            restrict: 'E',  //DOM Element
            scope: {    //define isolated scope
                list: '=',   //use the parent object
                selected: "="
            },

            templateUrl: '/CampaignFlow/StaticContent/Runs/run.grid.0.0.0.0.htm',  //HTML template URL

            controller: ['$scope', function ($scope) {  //the directive private controller, whith its private scope
                //$scope.statusList = [{ data_1: 11, data_2: 12 }, { data_1: 21, data_2: 22 }, { data_1: 31, data_2: 32 }];
                //Controller contains sort functionallity

                $scope.sort = { column: null, direction: 1 }
                $scope.column = null;
                $scope.direction = "asc";
                $scope.sortColumn = function (id) {
                    if(id!=$scope.column) {
                        $scope.column = id;
                        $scope.direction = "asc";
                    } else {
                        $scope.column = null;
                    }
                }
                $scope.toggleDir = function () {
                    $scope.direction = ($scope.direction == "asc") ? "desc" : "asc";
                }
               $scope.$emit('dataloaded');
            }]


        };
    }])

这是网格指令 html 模板的片段：

 <div style="overflow-y:auto;height: 200px;" id="runGrid">
            <table class="table table-striped" style="table-layout:fixed">
           <tbody>
                <tr  ng-repeat="status in list" id="row_{{status.action_id}}" ng-class="(status.action_id==selected)?'selected':''">
                    <td>

列表和选定的参数是从使用该指令的 html 中注入的

<run-grid list="list" selected="selectedActionID"></run-grid>
于 2014-04-01T11:34:52.820 回答
3

我想添加另一个答案，因为前面的答案认为在 ngRepeat 完成后需要运行的代码是一个角度代码，在这种情况下，上面的所有答案都提供了一个很好且简单的解决方案，其中一些比其他的更通用，如果摘要生命周期阶段很重要，您可以查看 Ben Nadel 的博客，但使用 $parse 而不是 $eval 除外。

但是根据我的经验，正如 OP 所述，它通常在最终编译的 DOM 上运行一些 jQuery 插件或方法，在这种情况下，我发现最简单的解决方案是创建一个带有 a 的指令setTimeout，因为setTimeout函数被推送到浏览器队列的末尾，它总是在一切都以角度完成之后，通常ng-repeat在它的父母 postLinking 函数之后继续

angular.module('myApp', [])
.directive('pluginNameOrWhatever', function() {
  return function(scope, element, attrs) {        
    setTimeout(function doWork(){
      //jquery code and plugins
    }, 0);        
  };
});

对于想知道为什么不使用 $timeout 的人来说，它会导致另一个完全不必要的摘要循环。

编辑：

感谢 drzaus 提供如何使用 $timeout 而不会导致摘要http://www.codelord.net/2015/10/14/angular-nitpicking-differences-between-timeout-and-settimeout/的链接

于 2015-12-30T15:31:35.530 回答