How to do a function call with ng-if or is it not possible?

6,155 views
Skip to first unread message

James Drinkard

unread,
Mar 30, 2016, 4:38:00 PM3/30/16
to AngularJS
I'm new to angular 1x and I have some complicated display business logic using multiple and nested ng-if statements that I had put into my web page, just to get it working.  It didn't pass the code review and the suggested refactoring was to call a service to handle this.   I created the service, but was unable to call it directly from the view, which I understand is a bad practice, so I put the call to the service in the controller as I normally do and then called the $scope reference from the view similar to what I have shown below: 

I made the call to the service from a controller similar to this code:
$scope.functionName = serviceName.functionName($scope.paramOne);

and in the page I used:
<li>
<p>The value is: {{functionName}} </p>
//Then there is a call to a filter here to show another value.
</li>

When I tried to use this:
<!i ng-if="{{functionName}}">

I got this error: 
Error: [$parse:syntax] Syntax Error: Token '{' invalid key at column 2 of the expression ...

So is my working code a best practice or is there a better solution?  I still need to have some display logic for showing/hiding the <li> tag with the value so this solution only cuts down on on the business logic in the view, but now I don't have a way to show/hide the <li> tag since I'm not using ng-if or rather couldn't get it to work with the function call inside of it.

Thanks for any help,
James





Emmanuel DEMEY

unread,
Mar 30, 2016, 4:46:25 PM3/30/16
to AngularJS

Hi

You should remove these {{ }} from your expression.

Manu


--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email to angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

James Drinkard

unread,
Mar 30, 2016, 5:11:11 PM3/30/16
to AngularJS

That worked, thanks!  So is this acceptable as a best practice or is there a better way to do this?

James

Tito

unread,
Mar 30, 2016, 5:17:08 PM3/30/16
to AngularJS
not so much as best practice. also depends on your view engine also : html (although no html engine), .ejs, .jade etc.
html {}
ejs <%=%>
jade I cant remember

Sander Elias

unread,
Mar 30, 2016, 11:42:55 PM3/30/16
to AngularJS
Hi James,

Your direct problem is solved my Emmanuel  The reason is that ngIf expects an expression.  the {{}} does evaluate an expression. As you can not nest expressions, that is the reason it didn't work.

As for best practices, No, most of this is not following best practices. If you want get to speed on best practices read through the styleguide

Regards
Sander

James Drinkard

unread,
Mar 31, 2016, 9:51:32 AM3/31/16
to AngularJS

Your explanation helps, thank you!

James
Reply all
Reply to author
Forward
0 new messages