清理AngularJs标记

时间:2015-06-27 23:14:01

标签: javascript angularjs

我注意到$(document).ready(function(){ var i=-1; var cr= <?php echo $countrow ?>; //Save all the ID:s to a JS variable so they can be used later. var imageids = [<?php echo implode(',', $imageids); ?>]; $('#down').click(function(){ if(i<cr-1) { i=i+1; alert(imageids[i]); //This uses the JS variable imageids, not the dead PHP one. } }); $('#up').click(function(){ if(i>0) { i=i-1; alert(imageids[i]); //Same as above. } }); }); {% if (formulaire.Projet.vars['choices'] | length > 0) %} // empyty select {% else %} // not empty select {% endif %} 可能变得非常混乱和混乱。例如:

AngularJS

在我的一些应用程序中,这可能并且已经非常混乱。它使调试html和css变得困难,并且在开发工具中导航DOM时非常烦人。

有没有办法清理标记?可能会删除<ul> <!-- ngRepeat: st in styles --> <li ng-repeat="st in styles" ng-class="{'active': st.id == style.id}" class="ng-scope"> <a ng-click="onStyleChange(st.id)" title="Test Style"> <span class="image" ng-style="{'background-image':'url(/sites/local/main/assets/img/styles/' + st.slug + '.png)'}" style="background-image: url(http://www.bestvinyl.dev/sites/local/main/assets/img/styles/alpha-style.png);"></span> </a> </li><!-- end ngRepeat: st in styles --> <li ng-repeat="st in styles" ng-class="{'active': st.id == style.id}" class="ng-scope"> <a ng-click="onStyleChange(st.id)" title="Closed Picket"> <span class="image" ng-style="{'background-image':'url(/sites/local/main/assets/img/styles/' + st.slug + '.png)'}" style="background-image: url(http://www.bestvinyl.dev/sites/local/main/assets/img/styles/closed-picket.png);"></span> </a> </li> </ul> 属性。我不确定DOM的所有内部因素,所以我不确定事后是用什么或需要什么。

这就是我想要的:

ng-

我已经看到许多类似的框架,html是超级干净的。 Reactjs是一个浮现在脑海中的例子。

1 个答案:

答案 0 :(得分:0)

您可以使用控制器中的函数返回ng-class / ng-style结果

即。

ng-style="getBG(st.slug)"


function getBG(slug){
  var bg = 'url(/sites/local/main/assets/img/styles/' + slug + '.png'

  return {
    'background-image': bg
  }
}

遵循DRY原则