Question

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

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

以下是点击时播放画外音的图片。

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

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

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

我希望它是这样的

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

Answer 1

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

然而，可以从页面中的任何javascript访问全局对象。

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

$scope.responsiveVoice = responsiveVoice;

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

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

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

那么html就是

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

Answer 2

试试这个

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

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

responsiveVoice.speak(param, "lang")

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

如何使用ng-click加载API

2 个答案: