我创建了一个切换列表来选择蓝牙设备并连接它,并为它们创建了一个controller.js 和service.js。但是,ng-change 仅在 ion-toggles 首次加载到 View 中时触发,之后不会触发更改。
这是我的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
函数也会被触发。我不知道这是为什么。有没有人告诉我这是什么原因?任何帮助,谢谢
最佳答案
Controller 应该将服务功能放在作用域上;不是服务功能的调用。
(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
。
更新
Can you also explain why scanDevices get invoked before I press the Scan button?
Which was bind to:
<button class="button button-stable" ng-click="scanDevices(devicesList)">Scan Devices </button>
通过将函数的调用绑定(bind)到范围变量而不是函数本身:
//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/