溫泉開關觸發回調的問題

Question

我正在嘗試使用onsen ui來實現一個switch元素來啟用/禁用BT，並且在與控制器js通訊時遇到麻煩。

    <script>
        var app = angular.module('app', ['onsen']);
        app.controller('Controller', function($scope) {
            $scope.item=[{selected:true}];
            $scope.enBT = function(){
                var Checked = BTSwitch.isChecked();
                alert(Checked);
            }
        }
    </script>

下面是我的HTML代碼。

    <div class="app">
        <h1 >Apache Cordova using Onsen</h1><br /><br />
        <ons-span id="enBluetooth" style="font-size: 40">  Enable bluetooth 
            <label class="switch">
                <input type="checkbox" var="BTSwitch" ng-model="item.selected" ng-change="enBT" class="switch__input">
                <div class="switch__toggle"></div>
            </label>
        </ons-span><br />
    </div>

會顯示switch UI，但是我無法讓它響應ng-change，也不顯示啟動狀態為true（在JS中設置）。 請有人能告訴我我做錯了什么嗎？ 謝謝你的幫助！

Answer 1

首先，您需要在wrapper元素中設置ng-app屬性，或調用angular.bootstrap(document, ['app'])來運行應用程序。

其次，您需要在wrapper元素中設置ng-controller屬性，以將控制器綁定到視圖。

第三， $scope.item不必是數組。 僅$scope.item = {selected: true}就足夠了。

您的代碼中還有其他一些錯誤。 請嘗試以下代碼段。

 var app = angular.module('app', ['onsen']); app.controller('Controller', function($scope) { $scope.item= {selected:true}; $scope.enBT = function(){ var Checked = $scope.item.selected; alert(Checked); }; }); 

 <link href="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.6/build/css/onsen-css-components.css" rel="stylesheet"/> <link href="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.6/build/css/onsenui.css" rel="stylesheet"/> <script src="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.6/build/js/angular/angular.min.js"></script> <script src="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.6/build/js/onsenui.min.js"></script> <div ng-app="app" class="app" ng-controller="Controller"> <h1 >Apache Cordova using Onsen</h1><br /><br /> <ons-span id="enBluetooth" style="font-size: 40"> Enable bluetooth <label class="switch"> <input type="checkbox" var="BTSwitch" ng-model="item.selected" ng-change="enBT()" class="switch__input"> <div class="switch__toggle"></div> </label> </ons-span><br /> </div>