我正在使用onsen ui，我遇到了以下问题：
我有一堆像这样的温泉成分：
-->ons-sliding-menu var="menu"
|
|-->ons-page
|
-->ons-list-item
|
|-->ons-switch var=myswitch
为什么我不能从角度控制器内部引用var"myswitch"？角度控制器设置在ons页面标签中。
提前谢谢。
当然可以，你可以在这里看到正在工作的CodePen。正如您所看到的，我使用了<ons-switch>方法isChecked()和setChecked(isChecked)，没有任何问题。如果你需要多个开关，不要使用var，而是使用ng模型，并将其绑定到控制器内的一个变量，然后从那里管理元素。这是一个例子，你可以在这里找到工作的CodePen
一个开关
<html ng-app="myApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<script src="components/loader.js"></script>
<link rel="stylesheet" href="components/loader.css">
<link rel="stylesheet" href="css/style.css">
<script>
angular.module('myApp', ['onsen'])
.controller('DemoController', function($scope) {
$scope.changeSwitchStatus = function(){
if($scope.mySwitch.isChecked())
$scope.mySwitch.setChecked(false);
else
$scope.mySwitch.setChecked(true);
};
});
</script>
</head>
<body>
<ons-sliding-menu var="app.slidingMenu" menu-page="menu.html" main-page="page1" side="left" type="overlay" max-slide-distance="200px">
</ons-sliding-menu>
<ons-template id="page1">
<ons-navigator ng-controller="DemoController">
<ons-page>
<ons-toolbar>
<div class="left">
<ons-toolbar-button ng-click="ons.slidingMenu.toggleMenu()"><ons-icon icon="bars"></ons-icon></ons-toolbar-button>
</div>
<div class="center">Page 1</div>
</ons-toolbar>
<ons-list>
<ons-list-item class="item">
<ons-switch var="mySwitch"></ons-switch>
</ons-list-item>
</ons-list>
<ons-button ng-click="changeSwitchStatus()">Change switch status</ons-button>
</ons-page>
</ons-navigator>
</ons-template>
</body>
</html>多个交换机
<html ng-app="myApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<script src="components/loader.js"></script>
<link rel="stylesheet" href="components/loader.css">
<link rel="stylesheet" href="css/style.css">
<script>
angular.module('myApp', ['onsen'])
.controller('DemoController', function($scope) {
$scope.switch = [
{
status: false
},
{
status: false
}
];
$scope.changeSwitchStatus = function(){
for(var i = 0; i < $scope.switch.length; i++){
$scope.switch[i].status = !$scope.switch[i].status;
}
};
});
</script>
</head>
<body>
<ons-sliding-menu var="app.slidingMenu" menu-page="menu.html" main-page="page1" side="left" type="overlay" max-slide-distance="200px">
</ons-sliding-menu>
<ons-template id="page1">
<ons-navigator ng-controller="DemoController">
<ons-page>
<ons-toolbar>
<div class="left">
<ons-toolbar-button ng-click="ons.slidingMenu.toggleMenu()"><ons-icon icon="bars"></ons-icon></ons-toolbar-button>
</div>
<div class="center">Page 1</div>
</ons-toolbar>
<ons-list>
<ons-list-item class="item" ng-repeat="item in switch">
<ons-switch ng-model="item.status"></ons-switch>
</ons-list-item>
</ons-list>
<ons-button ng-click="changeSwitchStatus()">Change switch status</ons-button>
</ons-page>
</ons-navigator>
</ons-template>
</body>
</html>