ion-toggle ng-change無法通過控制器+服務結構正確觸發

Question

我創建了一個切換列表，以選擇藍牙設備並進行連接，並為它們創建了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函數。 我不知道為什么。 會有人告訴我這是什么原因嗎？ 任何幫助，謝謝

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變量。