Bu genişlik AngularJS yönergesini izlemeyi neden Bootstrap sekmelerini değiştirerek çalışmıyor?

Question

Bir sayfada iki Bootstrap sekmesi var ve her sekmede bir liste görüntülenir. Ben her liste öğesi bir kare olmak istiyorum ve bunun Bootstrap kontrollü dinamik genişliğine eşit olacak şekilde her liste öğesinin yüksekliğini ayarlamak için bu angularjs direktifini yazdı: Ben bu sayfayı ilk sekmenin liste öğeleri yüklemek

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); 
     } 
    }; 
}); 

Direktifin çalıştığı anlamına gelen kareler olarak görün. Ama başka bir sekmeyi tıkladığımda, liste öğeleri varsayılan 100 px yüksekliğe sahip. İlk sekmeye geri döndüğümde, liste öğeleri bile şimdi varsayılan yüksekliğe sahip.

Burada yanlış olan ne oluyor?

GÜNCELLEME 1: http://plnkr.co/edit/Pc7keuRXR9R3U6AhZmFE?p=preview

GÜNCELLEME 2: UI-Bootstrap yerini Bootstrap ile

Plunker hala aynı sorun var Burada

bu sorunu gösteren bir plunker link: sekme anahtarı yerine ilişkin bir saatle

Plunker: http://plnkr.co/edit/rLE1wUAHKzJP6FVnGF6b?p=preview

GÜNCELLEME 3 genişlik değişiminin orijinal çözümü için geçici çözüm (doğru saatin düzgün çalışmadığı; pencere yeniden boyutlandırma nedeniyle genişlik değişikliklerine uyum sağlamak için ayrı bir yönerge kullanması gerekecektir): http://plnkr.co/edit/Y4Goe0cexq979JsIcBxl?p=preview

Genişlik saatinin neden sekme anahtarından sonra düzgün çalışmayı durdurduğunu anlamak isterim.

Answer 1

Yönerginizin izleyicisi, neler olup bittiğinin ardında bir özet döngüdür. Yeterince yakından bakarsanız, ilk sekmenin tıklatılmasının fazla bir şey yapmadığını görürsünüz (konsolda hiçbir şey oturum açmaz). Gördüğünüz şey, etkin sekmelerinizin öğeleri gizli sekmeler öğeleri yüksekliğine yeniden boyutlandırılmasıdır. Bu yüzden gizli sekmenin yükseklikleri doğru. Genel olanı yerine bootstrap açısal sürümünü kullanmanızı şiddetle tavsiye ederim. Böylece her şey (olaylar) açısal kontrolde olacak.

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

düzenleme: döngüsünü sindirmek anlama açısal dışında tetiklenmesi ve geri aramalar için bu belki yararlı: http://school.codecraftpro.com/courses/angularjs-1x-fundamentals/lectures/392422

edit2: ayrıca yararlı

Answer 2

https://scotch.io/tutorials/how-to-correctly-use-bootstrapjs-and-angularjs-together Biliyoruz ki önyükleme sekme özetini Anahtarlama, divlarınızın genişliğinden önde. Dolayısıyla, divlarınızın genişliğinin değişmesini izlemek yerine, sekme değiştiğinde izleyelim. Sekme değiştiğinde, bir sonraki özet döngüsünde olduğumuzdan emin olmak için 1 ms bekleyelim. Ardından genişliği alın ve kutu yüksekliğini güncelleyin.

Bunun neden böyle olduğu hakkında hiçbir fikrim yok, ama işte işe yarayacak bir çözüm.içeriği henüz boyutları zorunda kalmamak İşte

, bir plunker example

JavaScript

var app = angular.module("app",['ngAnimate', 'ui.bootstrap']); 
app.controller('mainController',['$scope',function($scope){ 
    $scope.tabs = [ 
     {'title': 'Tab 1'}, 
     {'title': 'Tab 2'} 
    ]; 
}]); 

app.directive('squareDiv', function ($timeout) { 
    return { 
     restrict: "A", 
     link: function (scope, element, attr) { 

      scope.active = function() { 
       return scope.tabs.filter(function(tab){ 
        return tab.active; 
       })[0]; 
      }; 

      scope.$watch(scope.active, function (tabActive) { 
       $timeout(function() { 
        element.css({ 
         height: element.width() 
        }); 
       }, 1); 

      }); 

     } 
    } 
});