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