AngularJS Bootstrap разрушилась INIT

Question

У меня есть следующий HTML:

<div class="pull-right text-success m-t-sm"> 
    <button class="btn btn-default" ng-init="isCollapsed = false" ng-click="isCollapsed = !isCollapsed" data-toggle="tooltip" data-placement="top" title="" data-original-title="Se kompetencer"><i class="fa {{isCollapsed == true ? 'fa-arrow-down': 'fa-arrow-up';}}" ng-click=""></i></button> 
</div> 

    <div collapse="isCollapsed" class="panel-body collapse" style="height: 0px;"> 
     <h4>Kompetencer</h4> 

    </div> 

Как вы можете видеть из этого кода я ng-init переменной isCollapsed лжи.

Однако, когда я запускаю мою страницу я получаю следующий вид:

Как вы можете видеть все коробки видны? Может ли кто-нибудь сказать мне, что здесь может быть?

Примечание. Я не переписываю переменную или что-либо еще.

Может быть, это что-то делать с ленивым нагрузки здесь мой config.router

.state('app.competence', { 
    url: '/Competence', 
    templateUrl: 'tpl/app_competence.html', 
    data: { 
     authorizedRoles: [USER_ROLES.lb, USER_ROLES.superadmin, USER_ROLES.subadmin] 
    }, 

    resolve: { 
     deps: ['$ocLazyLoad', 
      function ($ocLazyLoad) { 
       return $ocLazyLoad.load(['ngGrid']).then(
        function() { 
         return $ocLazyLoad.load(['js/controllers/competence/CompetenceController.js','js/controllers/competence/CompetenceUserController.js', 'js/controllers/competence/CompetenceTableController.js', 'js/controllers/headerController.js']); 
        } 
       ); 
      }] 
    } 
}) 

Html область применения:

<tab ng-controller="CompetenceUserController as cuCtrl"> 
    <tab-heading> 
     <i class="icon-users text-md text-muted wrapper-sm"></i>Brugere 
    </tab-heading> 
    <div class="wrapper-md"> 
     <div class="row"> 
      <div class="col-xs-12"> 
       <div class="panel no-body"> 
        <div class="panel-heading wrapper b-b b-light"> 
         <input class="form-control" ng-model="search.$" placeholder="Søg"> 
         <select class="form-control" ng-model="search.competence" ng-options="comp.name "></select> 
        </div> 
        <ul class="list-group"> 
         <li class="list-group-item" ng-repeat="user in users | filter:search:strict"> 
          <div class="media"> 
           <span class="pull-left thumb-sm"><img 
             src="{{user.image_path || 'img/AdamProfil.png'}}" alt="..." 
             class="img-circle"></span> 

           <div class="pull-right text-success m-t-sm"> 
            <button class="btn btn-default" ng-init="init(false)" 
              ng-click="isCollapsed = !isCollapsed" data-toggle="tooltip" 
              data-placement="top" title="" 
              data-original-title="Se kompetencer"><i 
              class="fa {{isCollapsed == true ? 'fa-arrow-down': 'fa-arrow-up';}}" 
              ng-click=""></i></button> 
           </div> 
           <div class="media-body"> 
            <div><a href="">{{user.profile.firstname +' '+user.profile.lastname || 
             user.username}}</a></div> 
            <small class="text-muted">{{user.title.name}}</small> 
           </div> 
           <div collapse="isCollapsed" class="panel-body collapse" 
            style="margin-top: 10px;"> 
            <h4 class="h4">Kompetencer</h4> 

            <div class="table-responsive"> 
             <table class="table table-striped b-t b-light"> 
              <thead> 
               <th>Kompetence Navn</th> 
               <th>Niveau</th> 
              </thead> 
              <tbody> 
               <tr ng-repeat="comp in user.user_has_competences"> 
                <td>{{comp.competence.name}}</td> 
                <td>{{comp.competence_level_id}}</td> 
               </tr> 
              </tbody> 
             </table> 
            </div> 
           </div> 
          </div> 
         </li> 
        </ul> 
       </div> 
      </div> 
     </div> 
    </div> 
</tab> 

Мой контроллер:

app.controller('CompetenceUserController', ['$http', '$scope', '$sessionStorage','competenceService', '$log', 'Session', 'api', function ($http, $scope, $sessionStorage, $log, Session, api, competenceService) { 
    $scope.init = function(value) { 
     $scope.isCollapsed = value; 
    }; 
    $scope.competences = []; 
    competenceService.getRawList().then(function(response) 
    { 
     $scope.competences = response; 
    }); 
    $scope.users = []; 
    $http.get(api.getUrl('userCompetence', null)).success(function (response) { 
     $scope.users = response; 
    }); 
}]); 

Answer 1

Это потому, что вы инициализация isCollapsed до false, а не true.

Answer 2

Вы назначаете значение isCollapsed для false, которое не определено ранее. ng-init="isCollapsed = false"

Я предпочитаю в этом случае вызывать функцию и присваивать значение переменной.

<button class="btn btn-default" ng-init="init(false)" ng-click="isCollapsed = !isCollapsed" data-toggle="tooltip" data-placement="top" title="" data-original-title="Se kompetencer"><i class="fa {{isCollapsed == true ? 'fa-arrow-down': 'fa-arrow-up';}}" ng-click=""></i></button> 

В контроллере

$scope.init = function(value) { 
    $scope.isCollapsed = value; 
    } 

Вы можете alsoe непосредственно назначить

$scope.isCollapsed = false; 

в контроллере.

Answer 3

Я не думаю, что это имеет какое-либо отношение к ленивой загрузке, а скорее то, что isCollapsed недоступно в области, о которой вы говорите.

Вы можете обеспечить его доступность путем его обертывания в объект (и, возможно, даже объявить ваш ng-init где-то еще выше).