ng-class不能将css类应用于元素

我的代码中有这个div。ng-class不能将css类应用于元素

<div ng-class="className" >{{className}}</div>

在某些时候，我是从一个叫changeClass功能NG单击更改类这个div的。

 $scope.changeClass = function(){ 
      console.log($scope.className) 
       if ($scope.className === "expand-icon") 
       $scope.className = "expand-icon.expanded"; 
       else 
       $scope.className = "expand-icon"; 
    };

因为console.log，我可以看到类更改，并且{{className}}在页面上输出。然而，CSS类似乎并没有被应用。

它实际上是一个'+'符号，需要用动画转化为' - '。这里的CSS：

/* + button */ 

.expand-icon { 
    height: 32px; 
    width: 32px; 
    position: relative; 
} 
.expand-icon::before, .expand-icon::after { 
    content: " "; 
    width: 32px; 
    height: 6px; 
    background-color: #fff; 
    display: block; 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transition: all 0.15s cubic-bezier(.42, 0, .58, 1); 
    opacity: 1; 
    border-radius: 2px; 
} 
.expand-icon::before { 
    transform: translate(-50%, -50%) rotate(90deg); 
} 
.expand-icon::after { 
    transform: translate(-50%, -50%); 
} 

.expand-icon { 
    height: 32px; 
    width: 32px; 
    position: relative; 
} 
.expand-icon.expanded::before { 
    transform: translate(-50%, -50%) rotate(0deg); 
} 
.expand-icon.expanded::after { 
    transform: translate(-50%, -50%) rotate(-90deg); 
    opacity: 0; 
}

于是展开图标应用但扩展-icon.expanded没有任何影响，因为我使用这个纳克级的伎俩。任何想法为什么？

来源

2016-12-15 dkx22

你应该用空格替换点：'$ scope.className = “扩大图标扩展”;' – devqon

可能重复http://stackoverflow.com/questions/20460369/添加和移除类功能于使用angularjs - -NG-点击 –

你应该用空格替换点：

在这种情况下，你可以做这样的

并在您的html中：

<div class="expand-icon" 
    ng-class="{ expanded: expanded }">{{className}}</div>

这将适用于您的expand-icon类总是和expanded类只有当$scope.expanded属性是truthy。

来源

2016-12-15 13:14:24 devqon

ng-class="className"是用于表达。例如：ng-class="{classNam:true}"。 $scope.className = "expand-icon expanded";

或者更好的，使用的ng-class其他记号：

// probably rename it to something like $scope.toggleExpanded() 
$scope.changeClass = function(){ 
    $scope.expanded = !$scope.expanded; 
};

class="{{className}}"

来源

2016-12-15 13:14:03

试试这个

<div class="{{className}}">{{className}}</div>

来源

2016-12-15 13:15:48

ng-class不能将css类应用于元素

回答

相关问题