Угловой пользовательский загрузочный бутстрап - сворачивание содержимого вкладки

Question

Использование директив AnguleJS UI для загрузки, есть ли способ свернуть содержимое вкладки с помощью тега?

У меня есть несколько таблеток/таблеток с контентом, которые начнут рушиться (скрыты). Когда какая-либо из вкладок активирована, содержимое вкладки должно распаковываться и оставаться открытым до тех пор, пока не будет нажата кнопка закрытия, которая закроет разделяемый раздел.

В контроллере я устанавливаю $ scope.isCollapsed в true. На каждой вкладке есть ng-click, который вызывает openCollapse(), который устанавливает isCollapsed в false. Если я добавлю директиву collapse = "isCollapsed" прямо к тегу, то также исчезнут вкладки, а не только контент.

Как это исправить?

Answer 1

Потребовалось выяснить, но это возможно!

Основная проблема, с которой я столкнулся, заключалась в рассмотрении вопросов и заключений. Я еще не запутался в трансключении (я довольно новичок в Angular), поэтому я все еще немного обволакиваю его. Я пробовал несколько разных способов, а пара других могла бы сработала, если бы я поняла, что переход был немного лучше, но в конце концов это было самым простым для меня, и я получил его работу.

Так что в основном я должен был сделать 4 основные вещи, чтобы заставить это работать.

1. Открываем ui.bootstrap-ВДУ-0.11.0.js (или любой другой версии # вы используете). Сделайте поиск по angular.module("template/tabs/tabset.html". В теге <div class=\"tab-content\">\n" добавьте collapse=\"isCollapsed\".
   Тег (и все в нем) заменяется при компиляции, и это код, который он заменяет, поэтому таким образом мы можем напрямую поставить директиву коллапса, где нам нужно.

2. Также в ui.bootstrap-ВДУ-0.11.0.js, сделайте поиск .directive('tabset'. Внутри link: function(scope, element, attrs) { добавьте: , добавьте: scope.isCollapsed = scope.$parent.isCollapsed'
   Здесь мы связываем transcluded scope isCollapsed с isCollapsed, который устанавливается в вашем начальном контроллере (вы также можете просто инициализировать isCollapsed в контроллере на следующем шаге, а не просто связывать его , но я уже инициализирован его в мой контроллер и я связан он пытается сделать другой метод)

3. еще в ui.bootstrap-ВДУ-0.11.0.js, сделайте поиск .controller('TabsetController'. Внутри этого контроллера добавьте:

   $scope.$on('openCol', function(event){ 
       $scope.isCollapsed = false; 
   }); 
   $scope.$on('closeCol', function(event){ 
       $scope.isCollapsed = true; 
   }); 
   

   Что мы делаем здесь, это добавление слушателей событий внутри запрещенной области таблеток. То, что мы собираемся сделать в конце, - создать трансляцию событий. Я также добавил $ часы(), как раз, так что я мог видеть, если он меняется:.

   $scope.$watch('isCollapsed', function(){ 
       console.log("isCollapsed has changed, it is now: " + $scope.isCollapsed); 
   }); 
   

4. Наконец, в регуляторе зрения (или в зависимости от того контроллер содержит .openCollapse() и .closeCollapse()), изменить функции от редактирования это прицелы isCollapsed, чтобы:

   $scope.openCollapse = function(){ 
       $rootScope.$broadcast("openCol"); 
   } 
   $scope.closeCollapse = function($event){ 
       $rootScope.$broadcast("closeCol"); 
   } 
   

   это будет транслировать события, которые прислушиваются к в TabsetController.Итак, теперь правильная область isCollapsed изменяется и отражается в коде. Теперь посмотрите, что прекрасное содержимое табуляции рушится.

Пожалуйста, дайте мне знать, если у меня нет моей терминологии совершенно правильно или если что-то по своей сути ошибочно в том, как я это делаю. Или просто, если есть другие способы. Всегда открыты для предложений :)