javascript - 如何使用 ng-click 加载 API

标签 javascript jquery html angularjs api

我是 angularjs 的初学者。我还利用 ResponsiveVoice.JS 作为应用程序的语音组件。我的问题是,如果我使用 ng-click,声音不起作用。如果我使用 onClick,它就可以工作。如何将此 API 与 ng-click 一起使用?

我需要 ng-click 来使用它,因为我需要将语音文本作为参数从 Controller 中的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"/>

最佳答案

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

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

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

$scope.responsiveVoice = responsiveVoice;

现在您可以在 View 中使用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)">

关于javascript - 如何使用 ng-click 加载 API,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31866194/

相关文章:

jquery - DatePicker 设置两个日期,startDate >= 明天

jQuery .val() 返回空字符串

javascript - Windows Phone 7 不显示脚本或图像

javascript - 无法在nodejs es6字符串的url中加载动态变量值

javascript - 从相同的 FireBase 表但在不同的路径中检索数据

javascript - 向 Javascript String 对象添加一种方法,该方法将用新字符串替换该字符串

javascript - 调整 UIWebView 到它的内容

javascript - bootstrap 3 中的 anchor 标记崩溃

javascript - 使用 javascript 的虚拟键盘

javascript - NLS : custom languages handler in single html view