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

• 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

1 Answer 1

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)" >