Onsen-ui 通过 var 属性引用 ons-components

Question

我正在使用温泉-ui，但遇到以下问题：

我有一堆这样的温泉成分:

-->ons-sliding-menu var="menu"
 |
 |-->ons-page
    |
    -->ons-list-item
      |
      |-->ons-switch var=myswitch

为什么我不能从 angular 控制器中引用变量 'myswitch'？ angular 控制器在 ons-page 标签中设置。

提前谢谢你。

Answer 1

当然可以，您可以看到正在运行的 CodePen HERE. As you can see, I used the <ons-switch> methods isChecked() and setChecked(isChecked) without any problem. If you need more than one switch don't use var but use ng-model and bind it to a variable inside the controller and manage the elements from there. This is an example, you can find the working CodePen HERE

一键切换

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

Onsen-ui 通过 var 属性引用 ons-components

Onsen-ui referencing ons-components by var attribute

onsen-ui