当NFC标签被读取时,调用AngularJS函数
Call an AngularJS function when an NFC tag is read?
我使用Ionic和phonegap-nfc编写了一个小的演示应用程序,它可以从NFC标签中读取唯一ID。
现在,我正在尝试创建一个列表,显示以前的读取事件。当标签被读取时,应该将事件添加到此列表中。
我有一个列表,可以有事件添加到它。代码看起来像这样:
<ion-view view-title="Usage History">
<ion-content>
<button class="button button-icon" ng-click="newTask()">
<i class="icon ion-compose"></i>
</button>
<ion-list>
<ion-item class="item-remove-animate item-avatar item-icon-right" ng-repeat="chat in chats" type="item-text-wrap" href="#/tab/tasks/{{task.id}}">
<img ng-src="{{task.pic}}">
<h2>{{task.name}}</h2>
<p>{{task.lastText}}</p>
<i class="icon ion-chevron-right icon-accessory"></i>
<ion-option-button class="button-assertive" ng-click="remove(task)">
Delete
</ion-option-button>
</ion-item>
</ion-list>
<script id="new-task.html" type="text/ng-template">
<div class="modal">
<!-- Modal header bar -->
<ion-header-bar class="bar-secondary">
<h1 class="title">New Task</h1>
<button class="button button-clear button-positive" ng-click="closeNewTask()">Cancel</button>
</ion-header-bar>
<!-- Modal content area -->
<ion-content>
<form ng-submit="createTask(task)">
<div class="list">
<label class="item item-input">
<input type="text" placeholder="What do you need to do?" ng-model="task.name">
</label>
</div>
<div class="padding">
<button type="submit" class="button button-block button-positive">Create Task</button>
</div>
</form>
</ion-content>
</div>
</script>
</ion-content>
</ion-view>
控制器看起来像这样:
.controller('TasksCtrl', function($scope, $ionicModal) {
$scope.tasks= [];
// Create and load the Modal
$ionicModal.fromTemplateUrl('new-task.html', function(modal) {
$scope.taskModal = modal;
}, {
scope: $scope,
animation: 'slide-in-up'
});
// Called when the form is submitted
$scope.createTask = function(task) {
$scope.chats.push({
name: task.name
});
$scope.taskModal.hide();
task.name= "";
};
// Open our new task modal
$scope.newTask = function() {
$scope.taskModal.show();
};
// Close the new task modal
$scope.closeNewTask = function() {
$scope.taskModal.hide();
};
$scope.remove = function(task) {
tasks.remove(task);
};
})
所有这些都可以正常工作。你有一个按钮,打开一个模式,你可以添加一个任务。按下按钮关闭模式,任务现在在列表中。
但是,我想在读取NFC标签时自动创建一个任务。我是一个使用Angular的初学者,所以我不知道如何用对应于phonegap-nfc的NFC动作来替换"ng-click"动作。
NFC事件的控制器看起来像这样:
.controller('MainController', function ($scope, nfcService) {
$scope.tag = nfcService.tag;
$scope.clear = function() {
nfcService.clearTag();
};
})
.factory('nfcService', function ($rootScope, $ionicPlatform) {
var tag = {};
$ionicPlatform.ready(function() {
nfc.addTagDiscoveredListener(function (nfcEvent) {
console.log(JSON.stringify(nfcEvent.tag, null, 4));
$rootScope.$apply(function(){
angular.copy(nfcEvent.tag, tag);
// if necessary $state.go('some-route')
});
}, function () {
console.log("Listening for tags.");
}, function (reason) {
alert("Error adding NFC Listener " + reason);
});
nfc.addMimeTypeListener('', function (nfcEvent) {
console.log(JSON.stringify(nfcEvent.tag, null, 4));
$rootScope.$apply(function(){
angular.copy(nfcEvent.tag, tag);
// if necessary $state.go('some-route')
});
});
});
return {
tag: tag,
clearTag: function () {
angular.copy({}, this.tag);
}
};
});
如何执行此操作?
你的nfcService已经在监听tagDiscovered事件,所以你只需要让TaskCtrl知道发生了什么。要做到这一点,你有几个选项
- 使用事件/广播
。在nfcService
$rootScope.$emit('tagFound', tag);
b。在TaskCtrl
$rootScope.$on('tagFound', function(tag) {
newTask();
});
- 注册回调函数
进入新状态
//在nfcService美元state.go('/任务/添加');
。新增nfcService功能
var cb = null;
this.registerListener = function (callback){
this.cb = callback;
}
// inside addTagDiscoveredListener
...
cb.call(tag)
b。在taskCtrl
// inject service as nfcService
nfcService.registerListener(myCallback)
function myCallback(tag) {
newTask();
}
我通常做选项2,但不要忘记取消注册以取消阻塞垃圾收集。服务不应该关心状态,所以选项3不是最好的方法
相关文章:
- 尝试调用AngularJS上的函数时出错
- 如何使用onclick事件调用AngularJS控制器
- 在jQuery中调用AngularJS函数
- 在 html5 视频结束时调用 AngularJS 控制器函数
- 如何点击按钮调用angularJs服务
- 为什么更改范围获胜'不能在ng if内部工作,而是通过函数调用AngularJS
- 调用AngularJS内部<脚本>标签
- 从html调用angularjs控制器中的一个函数,但未定义范围变量
- 从Javascript调用AngularJS控制器
- 单击链接时不调用 AngularJs 控制器
- 异步调用 AngularJS 不适用于 Canvas HTML
- 从Javascript调用AngularJS方法
- 从遗留代码调用 AngularJS
- 如何从纯JavaScript方法调用AngularJS过滤器
- 未调用 AngularJS 模板 ng-change
- 正确处理调用 AngularJS $http中的错误
- 如何从事件处理程序调用 AngularJS 作用域定义的函数
- 如何从android webview调用AngularJS服务代码
- 为什么不是't正在调用AngularJS表单处理程序方法
- 未调用Angularjs资源工厂transformResponse