Question

我是离子框架和角度JS的新手。目前我正在开发一个移动应用程序，它将使用mqtt协议进行数据交换。我已经为这个mqtt服务编写了一个cordova插件，并为此设计了一个非常基本的UI。我打算从这个论坛知道的是调用我用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>

我想使用text-field中的值并将其作为参数参数传递给函数“mqttPlugin.build（arg1）”，该函数在名为mqttPlugin.js的JS文件下定义。我知道我的问题非常基本，但如果有人帮助我，我会很感激。我知道我必须修改视图主页的控制器以便为这样的更改腾出空间，但由于我不熟悉依赖注入，我将不胜感激。

Answer 1

最好的方法肯定是将您的Javascript.js文件转换为角度服务。

让我们分开要做的工作：

为您的数据服务创建服务

myApp.factory('dataFactory', function() {
   var factory = {};
   factory.getDatas = function(inputValue){
   //your method to get datas
   };
   return factory;
});

将所有.js文件添加到index.html中以加载它们

更新您的控制器以注入新服务并调用getdatas函数

 myApp.controller('dataInfoCtrl', function($scope, dataFactory) {

    $scope.myModel = {};

    //create your function
    $scope.getDatas = function (value){
     dataFactory.getDatas(value);
   };
});

更新HTML：将ng-model添加到输入

<label class="item-input-wrapper">
  <input type="text" placeholder="MAC Address" ng-model="myModel.inputText">
</label>

在控制器模板中将新功能绑定到ng-click事件

<a class="button button-small icon ion-bluetooth button-positive" ng-click="getDatas(myModel.inputText)" >

如何在离子框架中使用javascript函数（利用角度js）

1 个答案: