AngularJs:View完全呈现后运行指令

Question

我是所有Angular World的新手,我面临着管理指令的问题.

我正在开发一个使用Tabs的项目,我希望扩展其功能以处理溢出的选项卡,当窗口大小比我的所有选项卡的宽度窄时,所以我需要计算元素的某些维度来实现这一点.选项卡是从$ scope中的Object构建的,问题是计算维度的指令是在完全编译视图之前运行的.

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

对于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 3

您可以在实际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);