为什么在切换Bootstrap选项卡时,观看AngularJS指令的宽度不起作用？

Question

我在页面上有两个Bootstrap选项卡,每个选项卡都显示一个列表.我希望每个列表项都是一个正方形,并编写此AngularJS指令以将每个列表项的高度设置为等于其Bootstrap控制的动态宽度:

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像素.当我切换回第一个标签时,即使是列表项也有默认高度.

这里出了什么问题？

更新1:

以下是一个说明此问题的plunker的链接:http://plnkr.co/edit/Pc7keuRXR9R3U6AhZmFE？p = preview

更新2:

带有Bootstrap的Plunker被UI-Bootstrap取代仍然存在同样的问题:http://plnkr.co/edit/rLE1wUAHKzJP6FVnGF6b？p = preview

更新3:

带有标签开关而不是宽度变化的手表的Plunker(宽度表原始问题的解决方法无法正常工作;需要使用单独的指令来适应由于窗口大小调整而导致的宽度变化):http://plnkr.co/edit/Y4Goe0cexq979JsIcBxl p =预览

我仍然想知道为什么宽度表在制表符切换后停止正常工作.

Answer 1

你指令的观察者是正在发生的事情背后的一个消化周期.如果仔细观察,您会看到第一个单击选项卡没有做太多事情(没有记录到控制台).你看到的是你的活动标签的元素被调整大小到隐藏的标签元素高度.所以隐藏标签的高度是正确的.我强烈建议使用bootstrap的角度版本而不是通用版本.这样一切(事件)都将处于角度控制之下.

https://angular-ui.github.io/bootstrap/

编辑:这可能对理解消化周期触发和角度以外的回调很有用:http://school.codecraftpro.com/courses/angularjs-1x-fundamentals/lectures/392422

edit2:也很有用https://scotch.io/tutorials/how-to-correctly-use-bootstrapjs-and-angularjs-together