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。

然而，当我运行我的页面时，我得到以下视图：

enter image description here

如你所见，所有的盒子都可见？谁能告诉我这里会发生什么？

注意 - 我没有覆盖变量或其他任何内容。

这可能与延迟加载有关，这是我的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;
  }

您也可以直接指定

$scope.isCollapsed = false;

在控制器中。

Answer 3

我认为它与延迟加载没有任何关系，而是isCollapsed在您引用的范围内不可用。

您可以通过将其包装在一个对象中来确保它可用（甚至可以将您的ng-init声明更高级别。）

AngularJS引导程序崩溃初始化

3 个答案: