为什么这个宽度看AngularJS指令不能在切换引导标签的工作？ [英] Why does this width watching AngularJS directive not work upon switching Bootstrap tabs?
问题描述
我有一个页面上有两个引导选项卡和每个选项卡显示一个列表。我想每个列表项是一个正方形，并写了这个AngularJS指令设置每个列表项的高度等于它的引导控制的动态宽度：
I have two Bootstrap tabs on a page and each tab displays a list. I want each list item to be a square and wrote this AngularJS directive to set the height of each list item to be equal to its Bootstrap controlled dynamic width:
app.directive('squareDiv', function () {
return {
restrict: "A",
link: function (scope, element,attr) {
scope.getWidth = function () {
return element.width();
};
scope.$watch(scope.getWidth, function (width) {
element.css({
height: width + 'px'
});
}, true);
}
};
});
当我打开这个网页，第一个选项卡的列表中的项目显示为正方形，这意味着该指令工作。但是，当我点击另一个选项卡上，列表中的项目也出现100像素的默认高度。当我切换回第一个选项卡，甚至列表项现在已经出现默认的高度。
When I load this page, the first tab's list items show up as squares which means the directive is working. But when I click on another tab, the list items there have the default height of 100 px. When I switch back to the first tab, even the list items there have the default height now.
这是怎么回事错在这里？
What is going wrong here?
更新1：
下面是链接到说明这一问题plunker：<一href=\"http://plnkr.co/edit/Pc7keuRXR9R3U6AhZmFE?p=$p$pview\">http://plnkr.co/edit/Pc7keuRXR9R3U6AhZmFE?p=$p$pview
Here is the link to a plunker that illustrates this problem: http://plnkr.co/edit/Pc7keuRXR9R3U6AhZmFE?p=preview
更新2：
Plunker与引导通过UI，引导取代了依然有同样的问题：<一href=\"http://plnkr.co/edit/rLE1wUAHKzJP6FVnGF6b?p=$p$pview\">http://plnkr.co/edit/rLE1wUAHKzJP6FVnGF6b?p=$p$pview
Plunker with Bootstrap replaced by UI-Bootstrap that still has the same problem: http://plnkr.co/edit/rLE1wUAHKzJP6FVnGF6b?p=preview
更新3：
Plunker与手表标签交换，而不是宽度改变（解决方法无法正常工作宽度腕表的原始问题，将需要使用一个单独的指令，以适应宽因调整窗口大小的变化）：<一href=\"http://plnkr.co/edit/Y4Goe0cexq979JsIcBxl?p=$p$pview\">http://plnkr.co/edit/Y4Goe0cexq979JsIcBxl?p=$p$pview
Plunker with watch for tab switch instead of width change (workaround for the original problem of width watch not working correctly; will need to use a separate directive for adapting to width changes due to window resizing): http://plnkr.co/edit/Y4Goe0cexq979JsIcBxl?p=preview
我还是想了解为什么宽度手表停止选项卡切换后正常工作。
I would still like to understand why the width watch stops working correctly after a tab switch.
推荐答案
您指令的守望者一个消化周期发生的事情之后。如果你仔细观察的话，你将看到的第一个选项卡中单击并没有做太多（没有记录到控制台）。你看到的是你的活动标签的元素被调整到隐藏的标签元素的高度。因此，隐藏的选项卡的高度是正确的。我会强烈建议使用引导，而不是普通的一个角版本。一切方式（事件）将在角控制
Your directive's watcher is one digest cycle behind of what's happening. If you look closely enough, you will see that the very first tab clicking does not do much (nothing logged to console). What you see is your active tab's elements being resized to the hidden tabs elements heights. So the hidden tab's heights are correct. I would strongly advise using the angular version of bootstrap instead of the generic one. That way everything (events) will be in the control of angular.
https://angular-ui.github.io/bootstrap/
编辑：这对于理解消化周期之外触发角和回调或许有用：<一href=\"http://school.$c$ccraftpro.com/courses/angularjs-1x-fundamentals/lectures/392422\">http://school.$c$ccraftpro.com/courses/angularjs-1x-fundamentals/lectures/392422
edit: this maybe useful for understanding digest cycle triggering and callbacks outside angular : http://school.codecraftpro.com/courses/angularjs-1x-fundamentals/lectures/392422
EDIT2 ：也是有用的<一个href=\"https://scotch.io/tutorials/how-to-correctly-use-bootstrapjs-and-angularjs-together\">https://scotch.io/tutorials/how-to-correctly-use-bootstrapjs-and-angularjs-together
这篇关于为什么这个宽度看AngularJS指令不能在切换引导标签的工作？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
