Question

我正在使用onsen-ui，我遇到以下问题：

我有一堆像这样的温泉组件：

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

为什么我不能引用var＆＃39; myswitch＆＃39;从角度控制器里面？角度控制器设置在ons-page标签中。

提前谢谢。

Answer 1

确实有效，您可以看到正在运行的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>

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

1 个答案: