如何使用ng-click加载API

I am a beginner with angularjs. I am also utilizing ResponsiveVoice.JS for the voice component of the app. My issue is that if I use ng-click, the voice doesn't work. If I use onClick, it works. How do I use this API with ng-click?

我是angularjs的初学者。我也在使用ResponsiveVoice.JS作为应用程序的语音组件。我的问题是,如果我使用ng-click,语音不起作用。如果我使用onClick,它的工作原理。如何在ng-click中使用此API?

I need it with ng-click because I need to pass in the voice text as a parameter from my routeParams in the controller.

我需要使用ng-click,因为我需要将语音文本作为参数从控制器中的routeParams传入。

Here is the image that will play the voiceover when clicked.

这是在单击时播放画外音的图像。

<img src="images/audio.png" onclick='responsiveVoice.speak("Text spoken.", "UK English Male")' class="pull-right"/>

Here is the link to the api that I have loaded into my index.html in the head section.

这是我在head部分加载到index.html中的api的链接。

<script src='http://code.responsivevoice.org/responsivevoice.js'></script>

What I want it to be is like this

我想要它是这样的

<img src="images/audio.png" ng-click='responsiveVoice.speak({{ parameter from controller }}, "UK English Male")' class="pull-right"/>

2 个解决方案

#1

responsivevoice is a global object but ng-click only recognizes methods or expressions that are available via angular scope.

responsivevoice是一个全局对象,但ng-click只能识别通过角度范围可用的方法或表达式。

A global object however can be accessed from any javascript in the page.

但是,可以从页面中的任何javascript访问全局对象。

Thus the simplest way you can do it is to create a scope object that references the global object:

因此,最简单的方法是创建一个引用全局对象的范围对象:

$scope.responsiveVoice = responsiveVoice;

Now you can use responsiveVoice in the view

现在,您可以在视图中使用responsiveVoice

To use parameters from scope create a slightly different version

要使用范围中的参数,请创建略有不同的版本

$scope.speak = function( item){
   // i have no idea what objects are used...assuming it has property `text`
   responsiveVoice.speak(item.text,  "UK English Male");
}

Then html would be

然后html会

<img src="images/audio.png" ng-click="speak( scopeObject)">

#2

try this

<img src="images/audio.png" ng-click='responsiveVoice.speak("{{ parameter from controller }}", "UK English Male")' class="pull-right"/>

You might have been passing a string from controller. Which is making your function call as

您可能从控制器传递了一个字符串。这使你的函数调用为

responsiveVoice.speak(param, "lang")

This will break you function call, as function is expecting a string parameter

这会打破你的函数调用,因为函数需要一个字符串参数