更改作用域变量 AngularJS 的值

Question

tl;dr：更改作用域变量的值并基于此重新呈现指令。如果我使用isAccepted: '=?'I receive Expression used with directive '' is non-assignable!如果我使用isAccepted: '@'，它不起作用（isAccepted 值更改，但视图不会reren。

这是我的 playerView 的范围：

scope: {
      isAccepted: '=?',
      player: '='
    },

如果isAccepted=true我想用绿色图标显示一个div（否则我用一个灰色图标显示一个div）来显示玩家的视图：

<div class="player-green-container" ng-if="::ctrl.isAccepted">
<div class="player-gray-container" ng-if="::!ctrl.isAccepted"> 

问题是，如果用户按下一个图标，我希望它显示另一个 div（灰色 -> 绿色，绿色 -> 灰色），所以如果用户按下灰色图标，我们应该更改 this.isAccepted 的值（我已经做到了）和（最重要的部分）我没有设法工作：重新渲染 .html 指令。

UPD：指令中的一些代码：

<div class="player-list">
  <comment-view class="player-list-item"
                player="p"
                is-accepted="ctrl.playerIds.indexOf(p.id) > -1"></comment-view>
</div>

在我的控制器中，我有以下内容：

@export {boolean}
this.isAccepted;

这是我的指令：

当我替换 @ with = console.log(this.isAccepted) 输出真假，但如果我替换 = with @ console.log 输出输出字符串值："ctrl.playerIds.indexOf(p.id) > -1"

有什么办法可以强制它评估为真/假（仍然使用'@'）（我尝试了eval()，但它不起作用 - 我仍然得到一个字符串）？

有可能吗？

谢谢。

Answer 1

如果您想使用@ 作为您的绑定方法，在您的html 中将is-accepted 更改为：

<div class="player-list">
    <comment-view class="player-list-item"
                  player="p"
                  is-accepted="{{ctrl.playerIds.indexOf(p.id) > -1}}">
    </comment-view>
</div>

将您的代码放在{{brackets}} 中将对其进行评估。如果您想要通知您的父母发生了更改，请创建一个回调方法，例如acceptedChanged='&'。

使用= 时出现“不可分配”错误的原因是ctrl.playerIds.indexOf(p.id) > -1 不是您可以分配的变量。 （想象一下ctrl.playerIds.indexOf(p.id) > -1 = (something)，那是无效的语法）