我创建了一个切换列表以选择蓝牙设备并进行连接,并为它们创建了controller.js和service.js。但是,ng-change
仅在离子开关首次加载到视野中时触发,之后不触发更改。
这是我的setting.html
片段:
<ion-toggle ng-repeat="item in devicesList"
ng-model="item.checked"
ng-change="connectDevice(devicesList)">
{{ item.address }}
</ion-toggle>
这是我的
settingController.js
:(function () {
'use strict';
angular.module('i18n.setting').controller('SettingController', SettingController);
SettingController.$inject = ['$scope','SettingService'];
function SettingController($scope, SettingService) {
$scope.devicesList = [];
$scope.scanDevices = SettingService.scanDevices($scope.devicesList);
$scope.connectDevice = SettingService.connectDevice($scope.devicesList);
};
})();
这是我的
settingService.js
:(function(){
'use strict';
angular.module('i18n.setting').service('SettingService', SettingService);
SettingService.$inject = [];
function SettingService(){
var self = this;
this.scanDevices = function(devicesCollection) {
window.bluetoothSerial.discoverUnpaired(function(devices) {
console.log("in discoverUnpaired callback, setting page");
devices.forEach(function(device) {
console.log(device.name);
device.checked = false;
devicesCollection.push(device);
});
}, function(error) {
console.log("in discoverUnpaired error function");
console.log(error);
});
};
this.connectDevice = function(devicesCollection) {
console.log(devicesCollection);
console.log("In connectDevice");
for (var i =0; i<devicesCollection.length; i++)
{
console.log(devicesCollection[i].id + " " + devicesCollection[i].checked);
if (devicesCollection[i].checked == true)
{
console.log(devicesCollection[i].name);
window.bluetoothSerial.connect(devicesCollection[i].address,
function(data) {console.log("This device is"+macaddress); console.log(data);},
function(error) {console.log(error);});
}
}
};
}
})();
而且,如果我直接在
settingController.js
中定义此函数,则它可以正常工作,并且可以检测到切换的每个更改。另外,我注意到即使不单击按钮,我的scanDevices
函数也会被触发。我不知道为什么。会有人告诉我这是什么原因吗?任何帮助,谢谢 最佳答案
控制器应将服务功能放在示波器上。而不是服务功能的调用。
(function () {
'use strict';
angular.module('i18n.setting').controller('SettingController', SettingController);
SettingController.$inject = ['$scope','SettingService'];
function SettingController($scope, SettingService) {
$scope.devicesList = [];
//$scope.scanDevices = SettingService.scanDevices($scope.devicesList);
$scope.scanDevices = SettingService.scanDevices;
//$scope.connectDevice = SettingService.connectDevice($scope.devicesList);
$scope.connectDevice = SettingService.connectDevice;
};
})();
由于
scanDevices
函数没有return
语句,因此scanDevices($scope.deviceList)
返回undefined
。因此,$scope.scanDevices
被设置为undefined
。更新资料
您还能解释为什么在我按下“扫描”按钮之前调用scanDevices吗?
绑定到:
<button class="button button-stable"
ng-click="scanDevices(devicesList)">Scan Devices
</button>
通过将函数的调用绑定到范围变量而不是函数本身:
//ERRONEOUS
$scope.scanDevices = SettingService.scanDevices($scope.devicesList);
//CORRECT
$scope.scanDevices = SettingService.scanDevices;
表达式
SettingService.scanDevices($scope.devicesList)
在单击按钮之前调用该函数。并将undefined
分配给$scope.scanDevices
变量。关于javascript - ion-toggle ng-change无法通过 Controller +服务结构正确触发,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/38986090/