专栏首页杰的记事本Angular ng-class的小细节

Angular ng-class的小细节

 在前面Angularjs开发一些经验总结中我们说到在angular开发中angular controller never 包含DOM元素(html/css),在controller需要一个简单的POJO(plain object javascript object),与view完全的隔离(交互angularjs框架的职责。但在某些项目中看见controller涉及DOM的元素最多的是在controller scope上定义某变量,其值为class name,形如: 

function ctr($scope){
   $scope.test =“classname”;
}

<div class=”{{test}}”></div>

     这种方式完全没错,是angular提供的一种改变class的方式,但是在controller涉及了classname在我看来是乎总是那么诡异,我希望的是controller是一个干净的纯javascript意义的object。 在angular中为我们提供了3种方案处理class: 1:scope变量绑定,如上例。(不推荐使用) 2:字符串数组形式。 3:对象key/value处理。

我们继续其他两种解决方案: 1字符串数组形式是针对class简单变化,具有排斥性的变化,true是什么class,false是什么class,其形如;

function Ctr($scope) { 
    $scope.isActive = true;
}

<div ng-class="{true: 'active', false: 'inactive'}[isActive]">
</div>

其结果是2中组合,isActive表达式为true,则 active,负责inactive。

2对象key/value处理主要针对复杂的class混合,其形如:

function Ctr($scope) { 

}

<div ng-class {'selected': isSelected, 'car': isCar}">
</div> 

当 isSelected = true 则增加selected class, 当isCar=true,则增加car class, 所以你结果可能是4种组合。

个人推荐用2,3两种方式,不建议将class放入controller scope之上,scope需要保持纯洁行,scope上的只能是数据和行为。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • flex下省略号的问题及whitespace nowrap

    最近在搞微信小程序,发现flex下使用省略号是没有效果的,而且还会打乱预期的结构,查询statckoverflow知道需要在父级设置min-width:0; 但...

    javascript.shop
  • CSS3实现饼图扇形loading效果

    2. 当我们煎饼动画转起的一瞬间,我们让假的饼子隐藏回家打酱油去。于是,从上面看,我们看到的就是满满一层的鸡蛋。

    javascript.shop
  • Vue如何在父级下使用v-slot的值

    https://cn.vuejs.org/v2/guide/components-slots.html#%E4%BD%9C%E7%94%A8%E5%9F%9F%...

    javascript.shop
  • bootstrap模态框之加载页面至modal-boby

    思路:使用$("#reserveForm").html(result); result为Ajax请求controller所返回的页面

    week
  • ztree实现左边动态生成树,右边为具体信息功能

    王小婷
  • 滴滴CEO程维:创业是一条没有尽头的路,路上是不完的仗

    用户1756920
  • HTML5的Web Workers

    该特性仅支持:FF3.5+、Opera 10.6+、Chrome 3+、Safari 4。

    meteoric
  • 使用django-allauth管理用户登录与注册

     django-allauth 是非常受欢迎的管理用户登录与注册的第三方 Django 安装包,django-allauth 集成了 local 用户系统 和 ...

    菲宇
  • EngineerCMS核心代码

    版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/hotqin888/article/det...

    hotqin888
  • 滴滴估值超过4000亿?总融资金额超过1300亿,程维身价暴涨

    滴滴是一个神奇的公司,在过去几年里面,累计完成了16轮融资,总融资金额超过200亿美金。按照媒体的说法,滴滴可能是融资轮数最多的互联网公司。在滴滴的发展史上,融...

    光荣与梦想1987

扫码关注云+社区

领取腾讯云代金券