Materialize CSS折りたたみが展開されない

Question

デフォルトの動作で折り畳み可能なアコーディオンスタイルをプロジェクトに追加しようとしています。ヘッダーはUIに表示されるようですが、折り畳み可能な部分を表示するように展開されません。どのように私はこの仕事をすることができます知っている？なぜそうでないのか見てみましょうか？ここで

は私の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とMaterialize CSS。

理由はまさに@DennyHioによると、これらのDOMはMaterialized CSSが初期化スクリプトを終了した後にAngular/Reactによって作成されたため、折りたたみできません。

私たちは、「初期化」、それらのDOM手動でする必要があります。

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