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

Question

我有一个用户对象，它包含一个 returns true 或 false 的函数，我想在 ng-if 中使用它 show/not 在我的模板中显示一些元素。它工作得很好，除非我将 ng-if 放在 ng-repeat 中。然后它停止工作，我不知道为什么。当我记录它们时，函数 returns 是正确的值，所以它不应该是函数的问题。我什至尝试用一个总是 returns 为真的测试函数来切换它，但即使这样也行不通。

这是应该起作用的测试函数：

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-if 时遇到问题，但只有当我将它放在 ng-repeat 中时才会出现问题？我不明白为什么 IsAdmin() 或 test() 函数可以在 ng-repeat 之外运行，但不能在其中运行？

Answer 1

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

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

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

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

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

ng-if inside ng-repeat not working when using controller function

angularjs

angularjs-ng-repeat

angular-ng-if