angularjs - How to use a javascript function in ionic framework (making use of angular js) - Stack Overflow

admin管理员组

文章数量:1430579

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.

<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.

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.

<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.

• javascript
• angularjs
• cordova
• ionic-framework

Share Improve this question Follow asked Jun 18, 2015 at 13:58 Ankur BhatiaAnkur Bhatia 1,13855 gold badges1818 silver badges3131 bronze badges 1

• You'll want to make your mqttPlugin an AngularJS service. This will allow you to easily inject it into any controllers that need it. This will make it easy for you to handle both passing data from the view to it and handling the responses so that you can update your view model. – jme11 Commented Jun 18, 2015 at 14:05

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 2

The best method is surely to transform your Javascript.js file into an 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

Update your controller to inject your new service and call getdatas function

 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

<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

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

本文标签： angularjsHow to use a javascript function in ionic framework (making use of angular js)Stack Overflow