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>

切换UI显示但是我无法让它响应ng-change，也没有将启动状态显示为true，这是在JS中设置的。请有人能告诉我我做错了什么吗？谢谢你的帮助！

Answer 1

首先，您需要在包装器元素中设置ng-app属性，或者调用angular.bootstrap(document, ['app'])来运行应用程序。

其次，您需要在包装器元素中设置ng-controller属性以将控制器绑定到视图。

第三，$scope.item不需要是一个数组。只需$scope.item = {selected: true}即可。

您的代码中还有其他一些错误。请尝试以下代码段。

＆＃13;

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);
  };
});

＆＃13;

<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>

＆＃13;

onsen开关触发回调的麻烦

1 个答案: