代码之家 › 专栏 › 技术社区 › SB77

温泉开关触发回调故障

onsen-ui switch-statement android

SB77 · 技术社区 · 9 年前

我正在尝试使用onsen-ui来实现一个开关元素,以启用/禁用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更改,也无法将启动状态显示为true,这是在JS中设置的。请有人告诉我我做错了什么?谢谢你的帮助!

1 回复 | 直到 9 年前

cither 9 年前

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

第二,你需要设置 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>

推荐文章

user134167 · onsenui:“pushPage已在运行”和“无法读取null的属性‘removeEventListener’”

7 年前

Oscar Wong · React Onsenui-ons navigator的页面堆栈为空(无法返回主页)

7 年前

b24 · TypeError:在OnsenUI 2 React navigator中未定义enterPage

8 年前

raven · 使用Onsen/Monaca的基于服务器的数据库

9 年前

Btz · 在OnsenUI+AngularJS+PhoneGap中的控制器之间传递数据

9 年前

Ashish Shukla · 无法使用onsen cordova运行角度js代码

9 年前

raimtoon · 新事务正在等待打开操作

9 年前

SB77 · 温泉开关触发回调故障

9 年前

Anina · onsenui导航器和滑动菜单

9 年前

Cadmos · 底部工具栏中的“启动UI操作”按钮

10 年前