Using AngularJS Values in JavaScript Function

Question

I have a function that calls some code using the Jcrop API that takes in some values to set aspect ratio. However, I need those values to come from a data connection for which I'm using Angular. So I need something like this:

<img src="sample.jpg" onclick="setAspectRatio({{valueToSet}});" />

But I get this error when trying to do it that way. If I do it this way:

<img src="sample.jpg" ng-click="setAspectRatio({{valueToSet}});" />

Then valueToSet actually evaluates, but I can't call it this way as setAspectRatio() isn't defined in any controller (it's a script on my page itself). This is mainly because it uses Jcrop and I didn't want to mix Jcrop with my Angular controller.

How can I accomplish what I'm trying to do here?

Answer 1

You don't need the {{}} around the variable name. ng-click=setAspectRatio(valueToSet) should work.

• runTarm: OP said that the setAspectRatio function is not on the controller's $scope.
• muttley91: Yeah setAspectRatio has to be defined on the page itself because it uses Jcrop.
• Timothy: Ah, totally missed that. :( have you tried something along the lines of... angular.element(document.querySelector('[ng-controller="controllerNameHere"]')).scope().variableName
• Timothy: Example... something like stackoverflow.com/questions/17960622/…