Материализовать CSS Складной нерасширяющийся

Question

Я пытаюсь добавить стиль аккордеона, сложенный по умолчанию в мой проект. Кажется, что заголовок попадает в пользовательский интерфейс, но он не будет расширяться, чтобы показать часть сбрасываемого тела. Кто-нибудь знает, как я могу это сделать? Или понять, почему это не так?

Вот мой HTML:

<div class="section"> 
<div ng-repeat="diary in diaries | orderBy:'date' "> 
<div class="row"> 
    <div class="col s2 push-s11"> 
     <a class="btn-floating btn-large waves-effect waves-light red right-align" ng-click="deleteDiary(diary.id)"><i class="material-icons">delete_forever</i></a> 
    </div> 
</div> 
<div class="row"> 
    <h5 class="center-align"><b>{{diary.category}}</b></h5> 
    <h6 class="center-align">{{diary.date}}</h6> 
</div> 

<div class="row"> 
    <div class="foodContainer"> 
    </div> 
    <div class="row center-align"> 
     <ul class="collapsible popout" data-collapsible="accordion" watch> 
      <li ng-repeat="food in diary.foods"> 
       <div class="collapsible-header">{{food.title}}</div> 
       <div class="collapsible-body"> 
         <label><b>Calories: </b><p>{{food.calories}}</p></label> 
         <label><b>Fat: </b><p>{{food.fat}}</p></label> 
         <label><b>Protein: </b><p>{{food.protein}}</p></label> 
         <label><b>Sodium: </b><p>{{food.sodium}}</p></label> 
         <label><b>Sugars: </b><p>{{food.sugars}}</p></label> 
       </div> 
      </li> 
     </ul> 
    </div> 
</div> 
</div> 
</div> 

Вот контроллер, где я инициализировать складная:

"use strict"; 

app.controller("DiaryCtrl", function($scope, $rootScope, $location, DiaryFactory, FoodFactory){ 
$scope.selectedDiary = ''; 
// $scope.selectedDiary = 'Diary0'; 
$scope.totalCalories = 0; 
$scope.totalFat = 0; 
$scope.totalProtein = 0; 
$scope.totalSodium = 0; 
$scope.totalSugars = 0; 
$scope.diaries = []; 
$scope.foods = []; 

//activate materialize collapsible list 
$('.collapsible').collapsible(); 

//getMeals 
//lists all meals on the diary page 
let getAllDiaries = function(){ 
    DiaryFactory.getDiary($rootScope.user.uid).then(function(FbDiaries) { 
     $scope.diaries = FbDiaries; 
     console.log('diaries: ', $scope.diaries); 
     FoodFactory.getFoodsFB($rootScope.user.uid).then(function(FbFoods){ 
      console.log('foods from controller', FbFoods); 
      FbFoods.forEach(function(food){ 
       $scope.diaries.forEach(function(diary){ 
        // console.log('foods', food); 
        if(food.mealId === diary.id){ 
         diary.foods = diary.foods || []; 
         diary.foods.push(food); 
         console.log('foods array on diary', diary.foods); 
        } 
       }); 
      }); 
     }); 
    }); 
}; 
getAllDiaries(); 

Вот скриншот: Screen Shot

Answer 1

У меня была такая же проблема с React.js и материализовать CSS раньше.

Причина в том, что, как @DennyHio сказал, эти DOM не сбрасываются, потому что они были созданы Angular/React после того, как Materialize CSS завершил свои инициализационные скрипты.

Мы вручную «INIT» те DOM:

function afterAngularOrReactHasCreatedAllDOM(){ 
    // Manually make all DOM with .collapsible collapsible 
    $('.collapsible').collapsible(); 
}