我與溫泉的UI工作，我有以下問題：溫泉的UI參照由var屬性附件組件
我的溫泉的成分那樣的堆棧：
-->ons-sliding-menu var="menu"
|
|-->ons-page
|
-->ons-list-item
|
|-->ons-switch var=myswitch
爲什麼能我是否從角度控制器中引用var'myswitch'？角度控制器設置在ons-page標籤上。
預先感謝您。
當然，它可以工作，你可以看到工作CodePen HERE。如您所見，我使用<ons-switch>方法isChecked()和setChecked(isChecked)沒有任何問題。如果您需要多個開關，請不要使用var，而應使用ng-model，並將其綁定到控制器內的變量並從那裏管理元素。這是一個例子，你可以找到工作CodePen HERE
ONE SWITCH
<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>Andi，謝謝你的代碼。我知道這是完全可能的。但是我的問題與onsen文檔中的內容有關http://onsen.io/guide/components.html#ons-switch它說有幾種方法可以使用這個組件。這種方法不適用於這種結構。我想知道爲什麼？ – nespapu 2015-02-20 09:13:21
嗨@nespapu，我用'var'屬性和'
你的代碼效果很好。我的代碼中一定有錯誤，它們不允許我通過它的var名稱正確地訪問交換機。讓我想一種發佈代碼的方式，以便您可以看到我沒有發明錯誤:) – nespapu 2015-02-23 14:03:00
你能提供一些代碼嗎？沒有它是很難回答你的問題 – 2015-02-06 00:17:29
嗨安迪！我無法發佈代碼。至少現在不行。但是我所要求的很簡單：當這個元素在這個結構中時，我可以通過角度控制器的var名稱訪問ons-switch嗎？你有沒有嘗試過類似的東西？ – nespapu 2015-02-19 22:44:30
是的，當然可以，我只是給你發一個樣品;） – 2015-02-20 05:15:40