Angular 1 ng-class无法正常工作 [英] Angular 1 ng-class doesn't work as expected

问题描述

我有一个简单的ng-class，可以根据条件切换两个类.当切换班级时，班级的顺序混乱了，不知道为什么.有人对此有解决方案吗?

I have a simple ng-class that switches two classes based on the condition. When the class is switched, the order of the classes is messed up not sure why. Has anyone a solution for this?

<div class="ui" ng-class="{'two column grid' : submitNow, 'one column grid' : defaultState}"></div>

submitNow为true时呈现的HTML.这样可以正常工作

Rendered HTML when submitNow is true. This works as expected

<!-- submitNow is true -->
<div class="ui ng-scope two column grid"></div>

defaultState为true时呈现的HTML.这弄乱了ng-class添加的类的顺序

Rendered HTML when defaultState is true. This messes up the order of classes added by ng-class

<!-- defaultState is true -->
<div class="ui ng-scope column grid one"></div>

***编辑****

*** Edit ****

很奇怪，因为它可以在jsfiddle上运行.但是这是我渲染的html代码的屏幕截图

Quite strange because it works on jsfiddle. But here's the screenshot of my rendered html code

这是一个演示

https://codepen.io/vibwaj/pen/KKPBdNp

推荐答案

更新:

我没有注意到使用这种方法的语义UI框架.如果您仍然需要相同的方法，则可以检查我创建了自定义指令的分叉的Codepen 代替原始的NgClass指令.

Update:

I didn't notice the semantic UI framework that is using this approach. If you still need the same approach, you can check the forked Codepen which I created a custom directive to be alternative than the original NgClass directive.

app.directive("myNgClass", function() {
  return {
    link: function(scope, element, attrs) {
      scope.$watch(
        function() {
          return attrs.isExpand;
        },
        function(isExpand) {
          element.removeAttr("class");
          if (JSON.parse(isExpand)) {              
            element.addClass("two column grid");
          } else {
            element.addClass("one column grid");
          }
        }
      );
    }
  };
});

---

原始答案

因此，深入研究Angularjs源代码中的NgClass指令实现并检查它们如何更新类，有一个名为

---

Original Answer

So diving deep into the NgClass directive implementation in Angularjs source code and checking how they update the classes, there is a function called updateClasses. In this function, it finds which classes should be removed and added.

NgClass会保留重叠的类并检查应添加/删除哪些类，而不是在布尔标志反转时替换所有类.

Instead of replacing all the classes when the Boolean flag gets inverted, NgClass keeps the overlapping classes and checks which classes should be added / removed.

因此，在您的情况下，一列网格(默认情况)和两列网格具有相同的 column grid 类，因此它将保留它们，但从头开始删除 one ，并在末尾添加 two .因此结果将是 column grid one .

So in your case,one column grid (the default case) and two column grid have the column grid classes in common, so it will keep them, but remove the one from the start and add two at the end. So the result will be column grid one.

我真的不建议将类的顺序用作CSS选择器.这将使选择元素变得更加困难，并使事情变得更加复杂.

I really don't suggest to use the order of the classes as CSS selectors. This will make it more harder to select elements and make things more complex.

对于您使用的CSS选择器，我也有一条评论.我真的建议您阅读使CSS选择器保持简短文章，因此您可以更好地使用较短的选择器，为什么将CSS选择器保持较短也可以在很多事情上有所帮助.

I also have a comment regarding the CSS selectors that you are using. I really suggest you to read Keep your CSS selectors short article so you can have a better practice of using shorter selector and why keeping the CSS selectors short can help with many things.

例如，如果不需要单独的 one ， column 和 grid 类，则可以仅使用.一个列的网格作为类名/CSS选择器，而不是 .one.column.grid .

For example, If you don't need the one, column and grid classes seprately, you can just use .one-column-grid as a class name / CSS Selector instead of .one.column.grid.

这篇关于Angular 1 ng-class无法正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！