AngularJS引导倒塌初始化

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变量设置为false。

然而，当我跑我的网页，我得到以下观点：

正如你可以看到所有的箱子都可见？任何人都可以告诉我这里可能会发生什么？

注 - 我不覆盖的变量或任何东西。

或许这是与延迟加载，这里是我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某处更高级别）。