Change the value of scope variable AngularJS

Question

tl;dr: change the value of scope variable and based on this rerender a directive. If I use isAccepted: '=?' I receive Expression used with directive '' is non-assignable!if I use isAccepted: '@' it doesn't work (isAccepted value changes, but the view doesn't reren.

Here's a scope of my playerView:

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

If isAccepted=true I wanna show a div with a green icon (otherwise I show a div with a gray icon) to show the player's view:

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

The problem is that if a user presses on a icon I want it to display the other div (gray -> green, green -> gray), so if a user presses gray icon we should change the value of this.isAccepted (I did it already) and (the most important part) I didn't manage to work: to rerender .html directive.

UPD: some code from directive:

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

In my controller I've got the following:

@export {boolean}
this.isAccepted;

Here's my directive:

When I replace @ with = console.log(this.isAccepted) outputs either true, false, but if I replace = with @ console.log outputs outputs string value: "ctrl.playerIds.indexOf(p.id) > -1"

Is there any way I can force it to evaluate to true/false (still using '@') (I tried eval() and it doesn't work - I still get a string)?

Is it possible?

Thanks.

Can you include more of your code? Specifically the html code you're using include your directive. — Michael Lynch
– Michael Lynch, Commented Aug 17, 2018 at 17:59
@MichaelLynch updated a question: so I figure out a way to pass boolean it'll work I believe. — J. Doe
– J. Doe, Commented Aug 17, 2018 at 18:08

Michael Lynch · Accepted Answer · 2018-08-17 18:20:22Z

-1

If you want to use @ as your binding method, In your html change the is-accepted to:

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

Placing your code in {{brackets}} will evaluate it. If you then want to get notify your parent that a change was made, create a callback method such as acceptedChanged='&'.

The reason you were getting "is not assignable" error when using = is because ctrl.playerIds.indexOf(p.id) > -1 is not a variable that you can assign to. (Imagine ctrl.playerIds.indexOf(p.id) > -1 = (something), thats not valid syntax)

answered Aug 17, 2018 at 18:20

Michael Lynch

1,73315 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

16 Comments

J. Doe Over a year ago

Thanks, actually I managed to get it by myself randomly! The only problem that's left is that with this directive the actual values of isAccepted is OK (true or false, I printed them out in a onInit()), but still all <divs> are greens (like if ng-if doesn't work).

J. Doe Over a year ago

is there any way to force evaluate it to boolean? ng-if="ctrl.isAccepted" I believe it thinks that "false" is kinda a string.

J. Doe Over a year ago

The problem is that actual values of isAccepted are right, but for some strange reason ctrl.isAccepted evaluates as true for every player.

Michael Lynch Over a year ago

I was just writing that its getting passed as a string. You can change the @ to < to use one way binding instead (with this i believe you should remove the {{}} in your html)

J. Doe Over a year ago

well, I can probably use ng-if="ctrl.isAccepted== 'false'" then

|

Collectives™ on Stack Overflow

Change the value of scope variable AngularJS

1 Answer 1

16 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

16 Comments

Your Answer

Sign up or log in

Post as a guest

Related