Question

我刚刚进入角度和onsen-ui并遇到了一个简单的问题。我希望答案是微不足道的。

我有一个ons-switch，我想在切换开关时在控制器中执行代码：

<ons-switch var="mark_as_favorite" onchange="toggleFavorite()"/>

这导致未定义toggleFavorite。这是有道理的，因为范围可能不同。那么如何从ons-switch访问控制器方法呢？

- 基思

Answer 1

如果您不熟悉AngularJS，请使用var属性。 var属性将Onsen UI元素作为全局变量处理。

<强>的index.html

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <script src="components/loader.js"></script>
    <link rel="stylesheet" href="components/loader.css">
    <link rel="stylesheet" href="css/style.css">
    <script>
        ons.bootstrap();

        function checkIsSwitchEnabled() {

            // mySwitch is disposed as a global variable. So mySwitch is accessible from everywhere.
            var isChecked = mySwitch.isChecked();

            alert(isChecked);
        }

    </script>
  </head>
  <body>
    <ons-navigator title="Navigator" var="myNavigator" page="page1.html">
    </ons-navigator> 
  </body>
</html>

<强> page1.html

<ons-page>
  <div style="text-align: center">
    <br/>
    <br/>
    <br/>    
    <ons-switch var='mySwitch' onchange='checkIsSwitchEnabled()'></ons-switch>        
  </div>
</ons-page>

Answer 2

这就是我所做的..

<强> HTML

<ons-page ng-controller="yourcntrl">
 <ons-switch modifier="list-item" ng-model="obj.IsSelected" ng-change="switchTrigger(obj)"></ons-switch>
</ons-page>

<强>的js

myApp.controller('yourcntrl', function ($scope) {
 ons.ready(function () {
     $scope.switchTrigger= function (obj) {
        alert(obj.IsSelected);
     }
 });
}

Answer 3

如果您使用ngModel指令，Onsen会将该模型应用于基础复选框，您的变量将在更改时自动更新

<ons-switch ng-model="mark_as_favorite">

如果您需要更新页面上的其他内容，因为它们会自动更新，这一点尤其有用。我使用它来显示和隐藏基于复选框值的其他选项并应用条件类：

<div class="example" ng-class="{favorite: mark_as_favorite==true}">Some content</div>

Answer 4

切换ons-switch时，可以使用ng-change属性执行代码。例如：

<ons-page ng-controller="MyCtrl">
    <ons-switch ng-model="MyCtrl.switchState" ng-change="MyCtrl.toggleSwitch(event)">/ons-switch>
</ons-page>

现在，如果开关打开或关闭，您可以使用event.value来访问布尔值。

更换ons-switch时如何调用角度控制器功能？

4 个答案: