AngularJs：视图完全呈现后运行指令

Question

我是所有 Angular World 的新手，我在管理指令时遇到了问题。

我正在开发一个使用选项卡的项目，我想扩展它的功能以在窗口大小比我所有选项卡的宽度更窄时处理溢出的选项卡，所以我需要计算元素的一些尺寸来实现这一点. 选项卡是从 $scope 中的对象构建的，问题是计算尺寸的指令在视图完全编译之前运行。

Plnkr 链接： http://plnkr.co/edit/LOT4sZsNxnfmQ8zHymvw?p=preview

我尝试过的：

1. 使用 templateUrl 在指令中加载模板
2. 使用 transclude
3. 在 ng-repeat 中使用 $last
4. 尝试重新排序指令并在每个选项卡中创建一个虚拟指令以触发事件

我认为有一些 AngularJs 事件或属性来处理这种情况。

请大家帮忙:)

Answer 1

我在你的 plunker 上做了一个分支，我想这就是你要找的东西

我把你的指令改成这个

.directive('onFinishRenderFilters', function ($timeout) {
    return {
        restrict: 'A',
        link: function (scope, element, attr) {
            if (scope.$last === true) {
                $timeout(function () {
                    scope.$emit('ngRepeatFinished');
                });
            }
        }
    }
});

然后我在你的 HTML 中添加了指令

 <li ng-repeat="tab in tabs" on-finish-render-filters>

最后我把要运行的代码放在重复完成后

$scope.$on('ngRepeatFinished', function (ngRepeatFinished) {
        $scope.tabs = [{
            index: 1,
            title: "Tab 1",
            link: "/tab1/"
        },{
            index: 2,
            title: "Tab 2",
            link: "/tab2/"
        },{
            index: 3,
            title: "Tab 3",
            link: "/tab3/"
        },{
            index: 4,
            title: "Tab 4",
            link: "/tab4/"
        }];

  });

http://plnkr.co/edit/TGduPB8FV47QvjjLnFg2?p=preview

Answer 2

您可以在实际的 DOM 元素上添加一个监视，以便了解您的 ng-repeat 何时加载到 DOM 中。

给你的 ul 一个 ID，比如#tabs

$scope.$watch(
    function () { return document.getElementById('tabs').innerHTML },  
    function(newval, oldval){
        //console.log(newval, oldval);
        //do what you like
    }, true);

Answer 3

对于 ng-repeat 中使用的指令，AngularJS 似乎没有可靠的渲染后回调。 [1]

也许您可以在 CSS 级别通过为特定屏幕宽度添加“响应式”溢出控制元素来解决此问题。

1. https://groups.google.com/forum/#!topic/angular/SCc45uVhTt8

更新：现在有一种方法可以使用嵌套的 $timeouts。见：http://lorenzmerdian.blogspot.de/2013/03/how-to-handle-dom-updates-in-angularjs.html

Answer 4

根据您的 cmets，您已经有了一个可行的解决方案……而且它目前是我所知道的唯一解决方案：$timeout。

问题是，你想实现什么？当所有渲染完成时，您需要一个回调。好的，很好，但是 Angular 怎么知道呢？在您显然正在使用 Angular 开发的现代应用程序中，重新渲染可能一直发生！从后端加载数据的地方可能会发生 js 事件，即使在初始化应用程序之后也是如此，这会导致重新渲染。用户的鼠标移动可以触发元素的重新渲染，由于 CSS 规则，这些元素甚至超出了角度范围。任何时候都可能发生重新渲染。

那么，考虑到这些因素，angularJS 在渲染完成时能告诉你什么？它只能告诉你，当当前的 $apply 和/或 $digest 链被处理时，浏览器事件队列现在是空的。这正是 angularJS 知道的唯一信息。为此，您使用延迟为 0 的 $timeout。

是的，你是对的，在更大的应用程序中，这可能会变得非常棘手，以至于它不再可靠。但是在这种情况下，您应该考虑如何以另一种方式解决此问题。菲如果稍后发生重新渲染，则一定有原因，例如从后端加载的新数据。如果是这样，您知道何时加载数据并因此发生重新渲染，因此您确切知道何时必须更新宽度。