Question

我正在尝试在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。

我的指令$watch用于此更改，当标志设置为true时，我从SystemUpdate服务获取范围变量，Angular通过应用更新的{{来处理其余部分1}}变量到DOM。

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

更新

除了使用scope.message之外，我仍然找不到解决方案，这根本不是一个很好的解决方案，因为如果消息发生变化，你可以清楚地看到div在位置之间“跳”...这必须是某种东西人们以前做过！这是任何人都可以在几秒钟内使用jQuery做的事情，但Angular正在使这成为一个真正的痛苦

Answer 1

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

如何在Angular摘要周期后操作DOM元素？

1 个答案: