ion-toggle ng-change 无法通过控制器 + 服务结构正确触发

Question

我已经创建了一个切换列表来选择蓝牙设备并连接它，我已经为它们创建了一个 controller.js 和 service.js。但是，ng-change仅在离子切换首次加载到视图中时触发，之后不会触发更改。

这是我的setting.htmlsn-p：

<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 功能也会被触发。我不知道为什么。有人能告诉我这是什么原因吗？任何帮助，谢谢

Answer 1

控制器应该把服务功能放在作用域上；不是服务函数的调用。

(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 变量。