如何在 Angular 摘要循环后操作 DOM 元素？答案

【问题标题】：How to manipulate DOM element after Angular digest cycle?如何在 Angular 摘要循环后操作 DOM 元素？
【发布时间】：2014-10-08 21:36:24
【问题描述】：

我正在尝试在 Angular 中创建一个简单的系统通知服务，它基本上将通知切换为在我的窗口顶部的固定位置可见，直到用户与之交互。我遇到的问题是在Angular根据我的$scope更新DOM后尝试定位元素@

app.directive('skSystemUpdate', function(SystemUpdate){
   return {
       replace:true,
       restrict: 'A',
       template:'<div class="sk-system-update-wrap">\
                    <div class="sk-system-update" ng-show="showSystemUpdate">\
                        <sk-img class="iGreenSystemCheck"></sk-img>\
                        <span class="sk-system-update-text">{{ message }}</span>\
                        <a>Undo</a>\
                    </div>\
                </div>',
       link: function(scope, elem, attrs){

           scope.$watch('showSystemUpdate', function(val){
                if(val){
                    angular.extend(scope, SystemUpdate.getScope());
                }
           });

       }

   }
});

我有一个名为 SystemUpdate 的服务，它用于根据参数（即 SystemUpdate.create('This is some text for the notification') ）设置范围变量，然后将 $rootScope.showSystemUpdate 标志翻转为 true。

我的指令是 $watching 进行此更改，当标志设置为 true 时，我从 SystemUpdate 服务获取范围变量，Angular 通过将更新后的 scope.message 变量应用于DOM。

我的问题是我无法弄清楚如何在 DOM 被操作后将通知居中。

更新

除了使用 $timeout 之外，我仍然找不到解决方案，这根本不是一个很好的解决方案，因为如果消息发生变化，您可以清楚地看到 div 在位置之间“跳跃”......这一定是人们拥有的东西以前做过！这是任何人都可以在几秒钟内使用 jQuery 完成的事情，但 Angular 让这变得非常痛苦

【问题讨论】：

如果有人认为我只是为 Angular 错误地设计了这个，请告诉我。我还是 Angular 的新手，不完全确定如何实现某些功能
我能够通过使用$timeout 并在$timeout 函数内部应用DOM 操作来使其工作。这是真的应该这样做吗？这感觉很 hacky，但我之前似乎有人将此方法用于其他事情
没关系.. 这种工作，但你实际上可以看到元素从一个地方跳到另一个地方。我觉得超时太慢了。
如果您想在用户与通知交互后更改 css，为什么不在 showSystemUpdate 为 true 时有条件地在通知块上设置一个类？
因为 CSS 需要根据元素的宽度动态更新。当通知消息发生变化时，元素会改变宽度，所以我需要用 JS 更新 CSS 以使元素居中

标签： angularjs

【解决方案1】：

我仍然很想知道在ng-show/ng-hide 之后有人会如何操作 DOM，但同时我能够通过简单地将我的元素包装在另一个 div 中来产生我正在寻找的效果那是position:fixed，然后只使用text-align:center 将较小的div 居中。这本质上是 Angular UI Bootstrap 以它们的模态为中心的方式，但如果任何 Angular 大师愿意的话，我仍然想知道原始问题的真正解决方案。

【讨论】：