How to use ng-click with multiple expressions? [duplicate]

Question

I want to use ng-click to perform multiple expressions. I want to both set a value on a model, and call a method from the $scope, like this:

<a ng-click="navigation.book = book && bookSvc.showBook(book)" href="#{{book.id}}">{{book.title}}</a>

Where I have && separating the two different expressions I want to perform. I know I could just add a method that does both things in the controller. Should I just do that, or is there a way to perform two expressions directly from inside ng-click?

Coquelicot

Answer 1

Simply using ';' instead of '&&' to separate the expression should work for you:

<a ng-click="navigation.book = book; bookSvc.showBook(book)" href="#{{book.id}}">{{book.title}}</a>

Hine

Yep, that did it. I should've realized it's just code! – Coquelicot

why not ng-click="bookSvc.showBook(navigation.book = book)" ? – Panjandrum

Answer 2

You can write only expression into ng-click.

The ngClick directive allows you to specify custom behavior when an element is clicked.

But you can write:

<a ng-click="( (navigation.book = book) && bookSvc.showBook(book))" href="#{{book.id}}">{{book.title}}</a>

In this case navigation.book gets book content.

Demo Fiddle

Reference

We have several options here to invoke navigation.book = book

What's happen if we will write:

ng-click="( bookSvc.showBook(book) && (navigation.book = book))"

In this case if (seems like bookSvc is a service) bookSvc.showBook(book) returns nothing or false, the navigation.book = book will never execute.

Demo 2 Fiddle

But if bookSvc.showBook(book) returns true the navigation.book = book will be invoked.

Demo 3 Fiddle

Youngster

Nice, didn't know this form of writing. Is this just a simple JavaScript-expression or how does it work? – Presentative

@hugoderhungrige its angualrJS (you welcome :)) – Youngster

This is pretty interesting, but Urish's suggestion is a fair bit more simple. – Coquelicot

@Coquelicot BTW, you can write as well: ng-init = "navigation.book = book. no worries :) – Youngster

Answer 3

I'd recommend putting all the logic in a function and just assign ng-click to it, to make the code simpler and more elegant.

Quicklime

It's an option, but I think it's just a matter or preference. – Coquelicot

When you put it in the function, you only have to look inside it to find related bugs, not in two places, wondering if you have done a syntax error by missing a semicolon or a bracket in the expression. It will be just a simple and nice to eye ng-click="bookSvc.showBook(book)". I agree though it's a question of preference. – Quicklime

Sergey, the only time I would say it's not a good idea to put all the logic in a function is if part of that logic is very "view" centric, and does not belong in a controller, which shouldn't know too much about a view. For instance, if you have an ng-click on an "OK" button on a modal dialog you want to both 1) call the controller to save the data to the service and 2) close the dialog box. If closing the dialog is via hiding the form, you want to do that in the view. Would you agree? – Dimercaprol