Question

我有一个用户对象，其中包含一个返回true或false的函数，我想在ng-if中使用if-if来显示/不显示模板中的某些元素。它非常有效，除非我将ng-if置于ng-repeat中。然后它停止工作，我不知道为什么。当我记录它时，该函数返回正确的值，因此它不应该是函数的问题。我甚至尝试使用始终返回true的测试函数来切换它，但即使这样也不起作用。

这是应该起作用的测试功能：

vm.test = function() {
               return true;
          }

这是模板：

<div class="row" ng-controller="techniquesController as techniques">
    <div class="col-sm-10">
        <div class="card">
            <div class="card__header text-centered" style="overflow: hidden;">
                Tekniker
            </div>

            <div ng-if="!techniques.techniques.$resolved" class="center-align padding-xlarge">
                <i class="fa fa-spin fa-spinner text-large"></i>
            </div>

            <div class="padding-xlarge">
                <div ng-repeat="(category, techniques)  in techniques.techniquesGrouped">
                    <h2 class="h3 margin-top-large">{{category}}</h2>
                    <ul class="list list--striped list--hoverable list--compact">
                        <li class="show-at-hover__target" ng-class="{'list__item': true, 'divider-bottom': !$last}" ng-repeat="technique in techniques | orderBy:['Name']" tabindex="-1">

                            <div class="list__item__primary-content">
                                <div class="list__item__headline">{{technique.Name}}</div>
                            </div>

                            <div class="list__item__secondary-content">
                                <div class="button-group show-at-hover__element" ng-if="techniques.test() === true">
                                    <button ui-sref="technique({techniqueId:technique.Id})" class="button button--compact button--raised-third text-small" ripple><i class="fa fa-pencil fade-75"></i></button>
                                    <button ui-sref="techniqueDelete({techniqueId:technique.Id})" class="button button--compact button--raised-secondary text-small" ripple><i class="fa fa-trash fade-75"></i></button>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <!-- works fine below -->
    <div class="col-sm-2 center-align" ng-if="techniques.currentUser.IsAdmin()">
        <a ui-sref="techniqueNew" class="FAB application-main__fab">
            <i class="fa fa-plus"></i>
        </a>
    </div>
</div>

如果我替换这一行：

<div class="button-group show-at-hover__element" ng-if="techniques.test() === true">

与

<div class="button-group show-at-hover__element" ng-if="'true' === 'true'">

它有效，因为它显然应该。但是，为什么我在使用ng时遇到问题 - 如果它适用于控制器，但只有当我把它放在ng-repeat中时？我不明白为什么IsAdmin（）或test（）函数会在ng-repeat之外工作但不在其中？

Answer 1

因为您在techniques内重新分配ngRepeat变量 - 您的控制器别名被覆盖：

<div ng-repeat="(category, techniques)  in techniques.techniquesGrouped">

将value属性更改为其他内容：

<div ng-repeat="(category, tech)  in techniques.techniquesGrouped">

当使用控制器功能时，ng-if内部ng-repeat不起作用

1 个答案: