如何將腳本編碼轉換爲angularJS編碼

-7

這是我的左側菜單左右菜單編碼腳本。我想將它轉換成angularJS，我從其他網站複製它並且無法理解。如何將腳本編碼轉換爲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>

來源

2017-09-05 Sahdev Kumar Rana

我可以看到這段代碼是某種切換功能。所以讓我試着解釋我們如何轉換這個！

的代碼開始於onclick，所以在角，這將是ng-click，同樣在角度可以在HTML編寫此像這樣

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

在上述線，我將初始化測試變量爲假。那麼ng-click將切換這個變量。然後，您正在切換按鈕的活動類。所以角度相當於ng-class其中測試將是一個布爾值，如果test爲真，那麼該類將被添加。我也爲殘疾人做同樣的事情。

同樣，我將其他類添加到另一個元素。

身體HTML：

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

的DIV ID - CBP-spmenu-S1：

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

請以此爲起點，繼續建設你的角度應用。

我已經包含了供您參考的演示。

JSFiddle Demo

來源

2017-09-05 18:19:13

如何將腳本編碼轉換爲angularJS編碼

回答

相關問題