更改范围变量的值 AngularJS

Question

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

这是我的 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) 输出 true 或 false，但是如果我替换 = with @ console.log 输出输出字符串值："ctrl.playerIds.indexOf(p.id) > -1"

有什么方法可以强制它计算为 true/false（仍然使用“@”）（我试过 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}} 中将对其进行评估。如果您随后想要通知您的 parent 已进行更改，请创建一个回调方法，例如 acceptedChanged='&'.

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

更改范围变量的值 AngularJS

Change the value of scope variable AngularJS

javascript

angularjs

angularjs-directive