Question

这是我的脚本编码左侧和左侧的左侧菜单。我想将它转换为angularJS，我从其他网站复制它，无法理解。

<script>
    var menuLeft = document.getElementById('cbp-spmenu-s1'), 
        showLeftPush = document.getElementById('showLeftPush'),
        body = document.body;

    showLeftPush.onclick = function() {
        classie.toggle(this, 'active');
        classie.toggle(body, 'cbp-spmenu-push-toright');
        classie.toggle(menuLeft, 'cbp-spmenu-open');
        disableOther('showLeftPush');
    };

    function disableOther(button) {
        if (button !== 'showLeftPush') {
            classie.toggle(showLeftPush, 'disabled');
        }
    }
</script>

Answer 1

我可以看到这段代码是某种切换功能。那么让我试着解释一下我们如何转换它！

代码从onclick开始，因此在角度为ng-click的情况下，您也可以在角度中将其写入HTML中

<button id="showLeftPush" ng-click="test=!test;" ng-init="test=false;" ng-class="{'active': test, 'disabled': test}"></button>

在上面的行中，我将test变量初始化为false。然后ng-click将切换此变量。然后，您将切换按钮的活动类。因此，它的角度等价为ng-class，其中测试将是一个布尔值，如果test为真，则将添加该类。我也为残疾班做同样的事情。

类似地，我将其他类添加到其他元素，如。

正文HTML：

<body ng-class="{'cbp-spmenu-push-toright': test}" ng-controller='MyController' ng-app="myApp">

以ID分组 - cbp-spmenu-s1：

<div id="cbp-spmenu-s1" ng-class="{'cbp-spmenu-open': test}">left</div>

请以此为出发点，继续构建角度App。

我已经提供了一个演示供您参考。

JSFiddle Demo

如何将脚本编码转换为angularJS编码

1 个答案: