javascript 如何在ionic框架中使用javascript函数（利用angular js）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30917463/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to use a javascript function in ionic framework (making use of angular js)
提问by Ankur Bhatia
I am pretty new in ionic framework and angular JS. Currently I am working on developing a mobile app which will use mqtt protocol for data exchange. I have already written a cordova plugin for this mqtt service and also designed a very basic UI for that. What I intend to know from this forum is the preferred convention of calling a function which I have written in java script. One of the views which I have defined in app.js is Home which contains the following few lines as part of its template.
我对 ionic 框架和 angular JS 还很陌生。目前我正在开发一个移动应用程序，它将使用 mqtt 协议进行数据交换。我已经为这个 mqtt 服务编写了一个cordova 插件，并为此设计了一个非常基本的用户界面。我想从这个论坛上知道的是调用我用 java 脚本编写的函数的首选约定。我在 app.js 中定义的视图之一是 Home，它包含以下几行作为其模板的一部分。
<ion-content class="padding">
<div class="list card">
<div class="item item-divider">MAC Address</div>
<div class="item item-body">
<div class="item item-input-inset">
<label class="item-input-wrapper">
<input type="text" placeholder="MAC Address" ng-model="??">
</label>
<a class="button button-small icon ion-bluetooth button-positive" ng-click="??" >
</a>
</div>
</div>
</div>
</ion-content>
I want to use the value from the text-field and pass that as an argument argument to the function "mqttPlugin.build(arg1)" which is defined under a JS file named mqttPlugin.js. I know my question is very basic, but I would appreciate if someone helps me with this. I know that I would have to modify the controller for the view home to make room for such a change, but since I am not familiar with dependency injection, I would appreciate some help.
我想使用文本字段中的值并将其作为参数传递给函数“mqttPlugin.build(arg1)”，该函数在名为 mqttPlugin.js 的 JS 文件下定义。我知道我的问题非常基本，但如果有人帮助我，我将不胜感激。我知道我必须修改视图主页的控制器才能为这种更改腾出空间，但由于我不熟悉依赖注入，我将不胜感激。
回答by aorfevre
The best method is surely to transform your Javascript.js file into an angular Service.
最好的方法当然是将您的 Javascript.js 文件转换为 angular Service。
Let's split the work to do :
让我们分工做：
Create a Service for your data Service
为您的数据服务创建服务
myApp.factory('dataFactory', function() {
var factory = {};
factory.getDatas = function(inputValue){
//your method to get datas
};
return factory;
});
Add all .js file into index.html to load them
将所有 .js 文件添加到 index.html 以加载它们
Update your controller to inject your new service and call getdatas function
更新您的控制器以注入您的新服务并调用 getdatas 函数
myApp.controller('dataInfoCtrl', function($scope, dataFactory) {
$scope.myModel = {};
//create your function
$scope.getDatas = function (value){
dataFactory.getDatas(value);
};
});
Update HTML : add ng-model to input
更新 HTML：将 ng-model 添加到输入
<label class="item-input-wrapper">
<input type="text" placeholder="MAC Address" ng-model="myModel.inputText">
</label>
Bind ng-click event yo your new function in your controller template
将 ng-click 事件绑定到控制器模板中的新功能
<a class="button button-small icon ion-bluetooth button-positive" ng-click="getDatas(myModel.inputText)" >
