我正在创建一个指令,将中心一个div。
到目前为止,我有这个代码:
app.directive("setcenter",function () { return { scope:{ setcenter: '=' },link: function (scope,element,attrs) { scope.$watch('setcenter',function (newValue) { if (newValue == true) { var width = element.width(); element.css('position','absolute'); element.css('top','80px'); element.css('left','50%'); element.css('z-index','200'); element.css('margin-left','-' + width / 2 + 'px'); } }); } } });
问题是元素的宽度。这个指令的整个要点是使用这个指令的div,没有设置宽度。我想要这个指令找出宽度和中心的div。
我遇到的问题是,当指令被调用时,div的实际宽度尚未知道。当我使用这个在我的情况,div是800px,但当页面完成加载时,div是221px。
那么,我可以做什么等待,直到实际的宽度是知道的div?
首先,我只使用这个逻辑,当我为一个指令而不是链接功能定义一个控制器。所以在链接功能中定义它可能会导致不同的行为,但我建议你首先尝试它,如果你不能得到它的工作,然后切换到使用控制器。
原文链接:https://www.f2er.com/angularjs/145174.html据我所知,你需要做这个工作的唯一变化是将$ scope更改为scope调用,$ element更改为element,因为依赖注入的对象成为标准链接函数参数。
$scope.getElementDimensions = function () { return { 'h': $element.height(),'w': $element.width() }; }; $scope.$watch($scope.getElementDimensions,function (newValue,oldValue) { //<<perform your logic here using newValue.w and set your variables on the scope>> },true); $element.bind('resize',function () { $scope.$apply(); });